HTML转图片，并提供下载

我们在微信小游戏开发中设计到分享功能，比如用户在玩我们开发的一款游戏，以下图为例；

在提交游戏结果后，由后台计算此用户获得的分数在总成绩排行榜中所处位置，以及这次成绩在历史成绩中所处位置，是历史最高，还是成绩平平，或者是历史最低呢！

后台给前端工程师返回了数据，前端展示数据，并提供用户下载此页面，进行长久保存。

此处我们就需要使用到三个js插件（下载地址：^{https://share.weiyun.com/5QMk49f}）

1、html2canvas.min.js

2、canvas2image.js

3、base64.js

下面我们直接演示代码

静态资源引入：

<script src="你的路径/html2canvas.min.js"></script>
<script src="你的路径/canvas2image.js"></script>
<script src="你的路径/toimg/base64.js"></script>

HTML代码：

<li><a id="btnSave">转换成图片</a></li>

JS代码：

<script>
    /*生成canvas图形*/
    // 获取按钮id
    var btnSave = document.getElementById("btnSave");
    // 获取内容id
    var content = document.getElementById("content");
    // 进行canvas生成
    btnSave.onclick = function(){
        html2canvas(content, {
         onrendered: function(canvas) {
         //添加属性
         canvas.setAttribute('id','thecanvas');
         //赋、读取属性值
         document.getElementById('images').appendChild(canvas);
         var oCanvas = document.getElementById("thecanvas");
         /*自动保存为png*/
        // 获取图片资源
        var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = img_data1;
        save_link.download = "Name_Img";
        /*下面的为原生的保存，不带格式名*/
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
        }
       });
    }
</script>

说明：

content：为要生成图片区域的id；

Name_Img :下载图片的名称；

注释：

将生成的图片隐藏起来，不做显示，在测试时可以显示。