画布已被跨域数据污染

Question

问题

• 我有 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

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

调试解决方案

• 我用谷歌搜索，发现没有浏览器允许跨源图像。
• 我不需要保存跨源图像。
• .htaccess 文件中的更改。
• 如何调试问题。

Answer 1

除了标题之外，我认为您需要将crossorigin 属性添加到您的图像标签中。

示例图片标签：

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

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

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/en-US/docs/Web/HTML/CORS_enabled_image）：

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

而且这段话可能对这个页面有帮助（https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes）：

默认情况下（即不指定属性时），CORS不 完全使用。 “匿名”关键字意味着不会有 通过 cookie、客户端 SSL 证书交换用户凭据 或 HTTP 身份验证，如 CORS 规范。