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