Quickly solves the problem of cross-domain image of Canvas. toDataURL,

Quickly solves the problem of cross-domain image of Canvas. toDataURL,

For example, when the image address of the page is output locally (Html2Canvas. js), The toDataURL access permission issue may occur due to the cross-origin issue of different image addresses:

[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 the customer's house.