本文详细介绍了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服务器同理)
再度检测:照片显示信息取得成功,照片提交取得成功。
以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。