Question

问题

/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规范为图像引入了crossorigin属性这与合适的CORS标题相结合，允许图像由外国来源加载的元素定义画布好像是从当前原点加载的。

此段落也可能有用（https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes）：

默认情况下（即未指定属性时），CORS不是一点也没用过。 “匿名”关键字意味着没有通过cookie，客户端SSL证书交换用户凭证或HTTP身份验证，如术语部分所述 CORS规范。

画布受到跨源数据的污染

1 个答案: