使用JS实现网页截图并保存

需求

今天接到一个新需求，需要在手机上实现对某张定位实现的自定义图片来生成一个邀请函，然后分享。 这个邀请函是必须是一张图片，由于后端图形拼接太麻烦，于是这个锅就到了前端。而且项目要求比较急，没有时间去研究canvas的图形拼接，就想到了之前做过的网页截图

实现

实现这个方法基于两个库，html2canvas和canvas2img

首先引入这两个库，然后使用html2canvas来对在页面加载完成之后的内容生成canvas

html2canvas($('#model'), {
    logging: false,
    useCORS: false,
    proxy: false,
    onrendered: function (canvas) {
    
        // canvas 就是绘制的canvas是对象
        // var url = canvas.toDataURL();
        // $('#newImg').attr('src', url);
        
        // 使用canvas2image将canvas转化为图片，直接返回一个img节点
        var u = Canvas2Image.convertToPNG(canvas, width, height);
    }
});

实现截图之后发现两个问题：

• html2canvas截取的是实际尺寸的图片，在手机的高分辨率的情况下，分享出去的图片非常的虚
• html2canvas无法截取跨域的资源，比如微信头像

解决问题：

1.html2canvas截取的是实际尺寸的图片，在手机的高分辨率的情况下，分享出去的图片非常的虚

时间紧任务急，是时候呼叫万能的bing了（百度坑爹）

解决方案

感谢这位大神提供的解决方案

注意：在这个解决方案下，外层元素不能使用百分比，会导致不正常缩放使得文字错位的。

2.html2canvas无法截取跨域的资源，比如微信头像

跨域无解，交给后端转base64啦