画布已被跨源数据污染 [英] The canvas has been tainted by cross-origin data

问题描述

问题

• 我有Reffred链接: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image .
• https://github.com/h5bp/server-configs-apache/blob/fc379c45f52a09dd41279dbf4e60ae281110a5b0/src/.htaccess#L36-L53

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

/etc/apache2/apache2.conf

/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>

• 再次启动apache.

错误:

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

代码

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

调试解决方案

• 我已经在Google上搜索了，发现没有浏览器将允许跨源图像.
• 我不需要保存交叉来源的图像.
• 更改.htaccess文件.
• 如何调试问题.

推荐答案

除了标题之外，我认为您还需要在图像标签中添加crossorigin属性.

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

示例图片标签:

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

如果您是通过javascript执行此操作，则以下是您提供的Mozilla链接中的代码示例:

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.com/image"; // insert image url here

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

此处是文档的引文部分(来源: https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image ):

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

HTML规范引入了图像的跨域属性 与适当的CORS标头结合使用，可以使图像 由从国外起源加载的元素定义，用于 画布，就好像是从当前原点加载它们一样.

The HTML specification introduces a crossorigin attribute for images that, in combination 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.

此段内容也可能对本页面有所帮助( https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes ):

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

默认情况下(即未指定属性时)，CORS未设置 完全用过. 匿名"关键字表示不会有 通过cookie，客户端SSL证书交换用户凭证 或HTTP身份验证，如 CORS规范.

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.

这篇关于画布已被跨源数据污染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！