Canvas引进跨域的照片致使toDataURL()出错的难题的处

2021-02-23 01:50 jianzhan

本文详细介绍了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";
                //提升这1行:
                img.setAttribute("crossOrigin",'anonymous');
                img.onload = function(){
                    var cxt=c.getContext("2d");
                    cxt.drawImage(img,0,0,300,150,0,0,200,126);
                }

随后再度运作。发现照片初次加载时,无法显示了。。。

操纵台出错以下:

【最后处理方式】

登陆腾迅云COS,寻找这个存储桶,设定“跨域浏览CORS”。(别的PHP/JAVA服务器同理)

再度检测:照片显示信息取得成功,照片提交取得成功。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。