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();//微信頭像地址