福彩幸运武林开奖 ?
歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > CSS PS切圖教程 >

??Canvas引入了跨域圖像,導致toDataURL()錯誤報告問題

 本文介紹了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.mcowk.com.cn/css-ps/ps50968.shtml

我要分享到:
上一篇:「前端 Zero系列」PS切圖-測量與取色
下一篇:沒有了

必備CSS教程 Essential CSS Tutorials

必備HTML基礎教程 Essential HTML Tutorials

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2018-10-23 14:02 原創:DIVCSS5
本文www.mcowk.com.cn DIVCSS5版權所有。

福彩幸运武林开奖