javascript - The canvas has been tainted by cross-origin data - Stack Overflow

admin管理员组

文章数量:1386689

Problem

• i have Reffred Link :.
• /.htaccess#L36-L53

/etc/apache2/apache2.conf

 <Directory /var/www/html>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
     <IfModule mod_setenvif.c>
<IfModule mod_headers.c>
    <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
        SetEnvIf Origin ":" IS_CORS
        Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
</IfModule>
</IfModule>
  </Directory>

• start the apache again .

Bug:

   Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Code

        var image = ctx.getImageData(0, 0, canvas.width, canvas.height),//debugger breakpoint stop here.
        imageData = image.data;

Debug solution

• i have googled and find that no browser will allow cross origin images.
• i don"t need to save images of cross origin .
• change in .htaccess file.
• how to debug the issue.

Problem

• i have Reffred Link :https://developer.mozilla/en-US/docs/Web/HTML/CORS_enabled_image.
• https://github./h5bp/server-configs-apache/blob/fc379c45f52a09dd41279dbf4e60ae281110a5b0/src/.htaccess#L36-L53

/etc/apache2/apache2.conf

 <Directory /var/www/html>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
     <IfModule mod_setenvif.c>
<IfModule mod_headers.c>
    <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
        SetEnvIf Origin ":" IS_CORS
        Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
</IfModule>
</IfModule>
  </Directory>

• start the apache again .

Bug:

   Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Code

        var image = ctx.getImageData(0, 0, canvas.width, canvas.height),//debugger breakpoint stop here.
        imageData = image.data;

Debug solution

• i have googled and find that no browser will allow cross origin images.
• i don"t need to save images of cross origin .
• change in .htaccess file.
• how to debug the issue.

• javascript
• apache

Share Improve this question Follow edited Jan 5, 2015 at 7:34 user2818060 asked Jan 5, 2015 at 7:19 user2818060user2818060 84555 gold badges2121 silver badges4242 bronze badges 4

• What have you changed in .htaccess? Is the space in between </If Module> really exist? Can you show you canvas render codes (related part)? – Raptor Commented Jan 5, 2015 at 7:28
• i have used code mozilla <IfModule mod_setenvif.c> <IfModule mod_headers.c> <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$"> SetEnvIf Origin ":" IS_CORS Header set Access-Control-Allow-Origin "*" env=IS_CORS </FilesMatch> </IfModule> </IfModule> – user2818060 Commented Jan 5, 2015 at 7:33
• what is error is im doing any silly raptor – user2818060 Commented Jan 5, 2015 at 7:33
• Did you add the crossorigin attribute to your image? I think you can use crossorigin="anonymous" – Gohn67 Commented Jan 5, 2015 at 9:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Along with the headers, I think you need to add the crossorigin attribute to your image tag.

Example image tag:

<img src="www.domain./image.jpg" crossorigin="anonymous" />

If you are doing this via javascript, here is the code example in the Mozilla link you provided:

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example./image"; // insert image url here

// Notice that they set the cross origin attribute here
img.crossOrigin = "Anonymous";

Here is elevant passage from the docs (Source: https://developer.mozilla/en-US/docs/Web/HTML/CORS_enabled_image):

The HTML specification introduces a crossorigin attribute for images that, in bination with an appropriate CORS header, allows images defined by the element loaded from foreign origins to be used in canvas as if they were being loaded from the current origin.

And also this passage may be helpful from this page (https://developer.mozilla/en-US/docs/Web/HTML/CORS_settings_attributes):

By default (that is, when the attribute is not specified), CORS is not used at all. The "anonymous" keyword means that there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication as described in the Terminology section of the CORS specification.

本文标签： javascriptThe canvas has been tainted by crossorigin dataStack Overflow