Quick solution to the cross-origin problem of Canvas. toDataURL images

How can I solve the cross-domain problem of Canvas. toDataURL images? The following is a quick solution to the cross-origin problem of Canvas. toDataURL images. Let's take a look at the example below. When outputting the image address of the page locally (Html2Canvas. js), the toDataURL access permission issue may occur due to the cross-origin issue:

[Redirect at origin 'http: // sub1.xx.com 'has been blocked from loading by Cross-Origin Resource Sharing policy: no 'Access-Control-Allow-Origin' header is present on the requested resource. origin 'http: // sub2.xx.com 'is therefore not allowed access.]

Solution:

According to the error analysis, you need to add "Access-Control-Allow-Origin" in the Control header to Allow Access to the source file. Therefore, we should handle this page [note that the image of the output Page] as follows:

Var img = new Image; img. onload = myLoader; img. crossOrigin = 'anonus us'; // optional values: anonymous, * img. src = 'http: // myurl.com /....';

Or in HTML

The core is that the request header contains the Origin:"Anonymous" or "*" fieldThe Access-Control-Allow-Origin: * field is appended to the response header. The problem is solved.

The above article quickly solves the cross-origin problem of Canvas. toDataURL images, which is all the content shared by Alibaba Cloud Xiaobian. I hope to give you a reference and support for my feet.