国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > HTML > 正文

Canvas引入跨域的圖片導(dǎo)致toDataURL()報(bào)錯(cuò)的問題的解決

2024-08-26 00:21:02
字體:
供稿:網(wǎng)友

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

Canvas,跨域,toDataURL(),報(bào)錯(cuò)

【場景】

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

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

【問題】

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

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

經(jīng)過了解,需要在圖片首次引用時(shí),設(shè)置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);                }

然后再次運(yùn)行。發(fā)現(xiàn)圖片首次載入時(shí),不顯示了。。。

Canvas,跨域,toDataURL(),報(bào)錯(cuò)

控制臺(tái)報(bào)錯(cuò)如下:

Canvas,跨域,toDataURL(),報(bào)錯(cuò)

【最終解決方法】

登錄騰訊云COS,找到這個(gè)儲(chǔ)存桶,設(shè)置“跨域訪問CORS”。(其他PHP/JAVA服務(wù)器同理)

Canvas,跨域,toDataURL(),報(bào)錯(cuò)

再次測試:圖片顯示成功,圖片上傳成功。

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持VeVb武林網(wǎng)。


注:相關(guān)教程知識(shí)閱讀請(qǐng)移步到HTML教程頻道。
發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 义乌市| 孝感市| 济宁市| 克东县| 无为县| 黄石市| 柘城县| 浦县| 五台县| 中阳县| 栾川县| 高州市| 青阳县| 宣威市| 普格县| 满城县| 中宁县| 万载县| 寿阳县| 海丰县| 松滋市| 永顺县| 佛冈县| 临泉县| 开阳县| 安阳县| 阿图什市| 南丰县| 镇原县| 黄龙县| 定日县| 富顺县| 叶城县| 孙吴县| 买车| 贵阳市| 武汉市| 华安县| 乃东县| 汝城县| 武城县|