阿里云

HTML转图片,并提供下载

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

image.png

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

image.png

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

此处我们就需要使用到三个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 :下载图片的名称;


注释:

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


喜欢就点个赞吧