用原生js和html5进行网页截图,使用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啦