Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to solve the toDataURL () error report caused by the introduction of cross-domain images by Canvas in html5". The editor shows you the operation process through an actual case. The method of operation is simple, fast and practical. I hope that this article "how to solve the toDataURL () error report caused by the introduction of cross-domain pictures by Canvas in html5" can help you solve the problem.

[scene]

When a user opens a web page, he / she requests a picture on Tencent's COS (picture server). Use canvas to draw.

The user can then reselect the picture, crop it, and upload it.

[question]

The picture is loaded for the first time, there is no problem with cropping and drawing after selecting a new picture. However, the upload failed. The error is as follows:

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

It is understood that the crossOrigin field needs to be set when the image is referenced for the first time:

Var c=document.getElementById ("cover_show"); var img=new Image (); img.src= "http://vsqx-cover-xxxxxx.coscd.myqcloud.com/"+this.vsqx_uid+".jpg"; / / add this line: img.setAttribute (" crossOrigin ", 'anonymous') Img.onload = function () {var cxt=c.getContext ("2d"); cxt.drawImage (img,0,0,300,150,0,0200126);}

Then run it again. It is found that the picture is not displayed when it is loaded for the first time.

Console error:

[final solution]

Log in to Tencent Cloud COS, find the bucket, and set "Cross-domain access CORS". (the same applies to other PHP/JAVA servers)

Test again: the picture is displayed successfully and the picture is uploaded successfully.

This is the end of the introduction of "how to solve the toDataURL () error caused by the introduction of cross-domain images by Canvas in html5". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.