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

This article mainly explains how to solve the error report of toDataURL () caused by the introduction of cross-domain pictures by Canvas. Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how to solve the problem that Canvas introduces cross-domain images to cause toDataURL () to report errors.

[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.

At this point, I believe you have a deeper understanding of "how to solve the problem of toDataURL () error caused by the introduction of cross-domain images in Canvas. You might as well do it in practice." Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.