html2canvas绘制微信头像跨域问题

背景：由于公司品牌部门想做一个宣传页，需要把微信头像，二维码等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如果是直接画的话，就会一定会遇到跨域问题。下面的图片解释什么是跨域。

什么是跨域？

为什么一定会遇到跨域呢，这是因为微信头像的地址是：

http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLBa8a3aKZ2KNnRFmstgTKeuOT3SZSwVFk7d7k37MCDGSyegicfeVFGbzDNFtPa3XiaqxvWhfPsM87A/132

而你项目中图片的地址是：

https://abcdef.com/mobile/poster.png

依照上面的跨域规则，这属于不同域名，完全是不可以的。
于是让运维同学配置了一下服务器

// 首先在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]

相当于把微信头像地址

http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLBa8a3aKZ2KNnRFmstgTKeuOT3SZSwVFk7d7k37MCDGSyegicfeVFGbzDNFtPa3XiaqxvWhfPsM87A/132

变成了

https://abcdef.com/wechat_image/mmopen/vi_32/Q0j4TwGTfTLBa8a3aKZ2KNnRFmstgTKeuOT3SZSwVFk7d7k37MCDGSyegicfeVFGbzDNFtPa3XiaqxvWhfPsM87A/132

这个时候就是同一域名但是不同文件夹，这个是完全允许的。
至此，大功告成！

一定要注意的三个问题
1，一个是img标签加上crossOrigin="anonymous"，一定别忘了。
2，图片域名一定改成允许通信的。
3，allowTaint: false。