Quick Solution to the Cross-origin problem of Canvas. toDataURL Images

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.