背景：由于公司品牌部门想做一个宣传页，需要把微信头像，二维码等UI素材合成一张图片。然后可以长按或截屏保存，分享到朋友圈后，其他用户可长按图片识别二维码进入我们的宣传页。
方案：开发在做的时候毫无疑问会用到canvas,但如果自己用canvas去合成话，一些相对复杂的界面会使得开发成本增大。于是我们选择了html2canvas
遇到的坑：跨域问题
首先开发中最后合成绘制图片肯定会用到下面的方法
html2canvas(document.getElementById("canvasImage"), {
allowTaint: false
}).then(function(canvas) {
that.base64Url = canvas.toDataURL("image/png");
});
1.这里的allowTaint一定要设置为false(因为allowTaint表示是否允许被污染,而被污染的canvas是没法使用toDataURL()转base64流的,但是我们这需要base64,所有allowTaint需要被设置为false)。
2.canvasImage这个id下面所有需要绘制的图片必须保证都是base64或者域名都是同一个。
2.1 保证都是base64的话，需要你用下面这个方法，把所有图片下载下来，然后转换成base64，再放到img标签里，且img的crossOrigin="anonymous"。（这个方法有时候并不能保证线上地址绘制完后还是OK的）
downImage(url, callback) {
var dataURL = "";
Img.crossOrigin = "anonymous";
Img.src = url;
Img.onload = function() {
//要先确保图片完整获取到，这是个异步事件
var canvas = document.createElement("canvas") //创建canvas元素
var width = Img.width //确保canvas的尺寸和图片一样
var height = Img.height
canvas.width = width
canvas.height = height
canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
dataURL = canvas.toDataURL("image/png"); //转换图片为dataURL
callback(dataURL);
};
},
2.2如果是直接画的话，就会一定会遇到跨域问题。下面的图片解释什么是跨域。
什么是跨域？
为什么一定会遇到跨域呢，这是因为微信头像的地址是：
而你项目中图片的地址是：
依照上面的跨域规则，这属于不同域名，完全是不可以的。
于是让运维同学配置了一下服务器
// 首先在nginx配置里增加如下代码
location ^~ /wechat_image/ {
add_header 'Access-Control-Allow-Origin' "$http_origin" always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified- Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
proxy_pass http://wx.qlogo.cn/;
}
// 然后将前端获取微信的头像的地址由 [http://wx.qlogo.cn/xxx](http://wx.qlogo.cn/xxx) 改成[https://${自己的域名}/wechat_image/xxx]
相当于把微信头像地址
变成了
这个时候就是同一域名但是不同文件夹，这个是完全允许的。
至此，大功告成！
一定要注意的三个问题
1，一个是img标签加上crossOrigin="anonymous"，一定别忘了。
2，图片域名一定改成允许通信的。
3，allowTaint: false。
