Chrome 上的 crossOrigin 属性干扰了外部图像检索

Question

我正在使用 HTML Canvas 在我的页面上合成图像。我的 canvas 的元素之一是来自外部域 (Amazon S3) 的图像，我使用 CORS 检索此图像并在图像加载时使用 crossOrigin 属性。

var image = document.createElement('img');
image.setAttribute('crossOrigin', '');
image.onload = function() {
    CANVASCONTEXT.drawImage(image, 0, 0, 200, 200)
}
image.setAttribute('src', MYEXTERNALURL);

并获取图像数据：

MYCANVAS.toDataURL()

在 Firefox 上一切正常。

在 Chrome 我无法从外部来源检索图像并收到错误消息：

No 'Access-Control-Allow-Origin' header is present on the requested resource

好像没有设置 CORS 配置。

如果我删除 crossOrigin 属性，我可以合成我的图像，但我不能使用 toDataURL() 来获取图像数据（这是有道理的）。

你有任何指示，解决这个问题的方法吗？

谢谢

Answer 1

Chrome 阻止跨源查询。

您可以使用 htaccess 或主机设置修复它。

Apache/Htaccess:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

Nginx:

location / {
add_header Access-Control-Allow-Origin *;
}

您可以用德语阅读on my blog。

Answer 2

哇，我知道问题出在哪里了。

我两次请求外部资源（第一次检查图像是否存在，第二次向 canvas 请求）。在第二次调用时，图像被浏览器缓存。所以我猜 canvas 由于图像的来源（浏览器的缓存）而无法绘制图像。

我不知道这是否有意义，但我知道我会重写这部分代码！

Chrome 上的 crossOrigin 属性干扰了外部图像检索

crossOrigin attribute messing with the external image retrieval on Chrome

html

google-chrome

canvas

cross-domain

cors