Quickly solve the cross-domain problem of Canvas.toDataURL images

As mentioned, when the image address of the page is output locally (Html2Canvas.js), there will be a toDataURL access permission problem due to cross-domain problems from different sources:

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

Add "Access-Control-Allow-Origin" to the control header according to the error analysis needs, that is, allow access to the source file permissions, then we This page [note that the image of the page needs to be output] is processed like this:

var img = new Image;
img.onload = myLoader;
img.crossOrigin = 'anonymous'; //可选值：anonymous，*  
img.src = 'http://myurl.com/....';

or

81d8471adc0f2a9487089648726c07b9

The core is that the request header contains the Origin: "anonymous" or "*" field, and Access-Control-Allow-Origin will be appended to the response header. : * Field, problem solving.

The above article quickly solves the cross-domain problem of Canvas.toDataURL images is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more articles related to quickly solving the cross-domain problem of Canvas.toDataURL images, please pay attention to the PHP Chinese website!