Javascript 画布已被跨源数据污染

问题

• 我有Reffred链接：

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

代码

调试解决方案

• 我在谷歌上搜索过，发现任何浏览器都不允许跨源图像
• 我不需要保存跨原点的图像
• .htaccess文件中的更改
• 如何调试该问题

---

除了标题之外，我认为您还需要将

crossorigin

属性添加到图像标签中

示例图像标记：

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

这是文件中的相关段落（来源：）：

HTML规范为图像引入了交叉源属性 这与适当的CORS标头相结合，允许使用图像 由从要在中使用的外来源加载的元素定义 画布，就好像它们是从当前原点加载的一样

从这一页（）来看，这段话可能会有所帮助：

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

---

您在

.htaccess

中更改了什么？在

之间的空格真的存在吗？您可以显示画布渲染代码（相关部分）吗？我使用了代码mozilla SetEnvIf Origin:“CORS头集访问控制允许Origin吗？”*“env=IS_CORS什么是错误？我在做什么愚蠢的猛禽？你在你的图像中添加了

crossorigin

属性了吗？我认为您可以使用

crossorigin=“anonymous”

uncaughttypeerror:无法设置null error的属性'width'，im receivingCanvas.width=img.width；js:31未捕获的TypeError:无法设置NullImage的属性“宽度”，可能尚未加载。在尝试获取宽度之前，可能需要使用

onload

事件。以下可能是有用的链接：

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

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

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