html2canvas截圖問題，圖片跨域導致截圖空白

年前的一個項目，要做一個H5截屏分享的功能，使用的是html2canvas插件，截圖功能是實現了，但是跨域的圖片死活不出來，

 

 經過幾天谷歌百度和不斷的嘗試，終於找到解決辦法了，一共經歷了讓人心力憔悴的兩個坑：

小坑：

　　跨域的logo和分享的二維碼都出不來，

1、需要在服務器IIS上的HTTP響應標頭設置，最簡單粗暴的方法就是全部設置成*，不過這樣安全性也低，自己可以根據自己需求設置：

access-control-allow-credentials:true
Access-Control-Allow-Headers:*
access-control-allow-origin:*

2、在html2canvas添加參數useCORS設置：

html2canvas(document.getElementsByClassName('codediv')[0], {
                useCORS: true,
                allowTaint: false
            }).then(function (canvas) {

　　　　　　　　　　var url = canvas.toDataURL("image/png");
　　　　　　　　　　var oA = document.createElement("a");
　　　　　　　　　　oA.download = '測試截圖';// 設置下載的文件名，默認是'下載'
　　　　　　　　　　oA.href = url;
　　　　　　　　　　document.body.appendChild(oA);
　　　　　　　　　　oA.click();
　　　　　　　　　　oA.remove(); // 下載之后把創建的元素刪除

            });

大坑：二維碼顯示了，logo時而顯示時而不顯示，絞盡腦汁：

解決方法：

1、需先將以上兩步設置好

2、在img標簽上設置 crossorigin="anonymous" 屬性；

 

 3、需要在img的src后加上參數(我就是一直卡在這，一直不能解決)：