canvas跨域图片报Tainted canvases may not be exported.解决办法

我们做微信活动，经常会碰到生成图片进行分享的需求。生成的图片中肯定包含微信头像，这时就会碰到canvas转图片时的跨域问题。

一开始我是把微信头像下载到服务器上来避开跨域问题的，但这样做太累了，也浪费服务器存储空间。

之后再网上搜索后得到如下解法

var img = new Image();
img.src = userInfo.headimgurl;//微信头像地址
img.setAttribute('crossOrigin', 'anonymous');    // 重点
img.onload=function(){
    var canvas = document.createElement("canvas");
    canvas.width = 150;//这个设置不能丢，否者会成为canvas默认的300*150的大小
    canvas.height = 150;//这个设置不能丢，否者会成为canvas默认的300*150的大小
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, 150, 150);
    var dataURL = canvas.toDataURL("image/png");
    $("img").attr("src", dataURL);
}　　

 

　咋一测试，是ok的。后面发现经常会报Tainted canvases may not be exported.错误

于是重新开始搜索，大概是浏览器缓存和cdn的问题，具体原因就不详解了。

最终给微信头像链接加上随机数参数后缀就解决了

img.src = userInfo.headimgurl + "?v=" + new Date().getTime();//微信头像地址