歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!

 本文介紹了Canvas引入跨域的圖片導致toDataURL()報錯的問題的解決,分享給大家,具體如下:

【場景】

用戶打開網頁,則請求騰訊COS(圖片服務器)上的圖片。使用canvas繪圖。

然后,用戶可以重新選擇圖片、裁剪、上傳。

【問題】

圖片首次載入,選擇新圖片后裁剪、繪制都沒有問題。但上傳失敗,報錯如下:

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

經過了解,需要在圖片首次引用時,設置crossOrigin字段:

                var c=document.getElementById("cover_show");
                var img=new Image();
                img.src="http://vsqx-cover-xxxxxx.coscd.myqcloud.com/"+this.vsqx_uid+".jpg";
                //增加這一行:
                img.setAttribute("crossOrigin",'anonymous');
                img.onload = function(){
                    var cxt=c.getContext("2d");
                    cxt.drawImage(img,0,0,300,150,0,0,200,126);
                }

然后再次運行。發現圖片首次載入時,不顯示了。。。

如需轉載,請注明文章出處和來源網址:http://www.khijtf.live/css-ps/ps50968.shtml

江西多乐彩走势图今天