Question

我使用HTML 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上，我无法从外部源检索图像并收到错误：

否＆＃39;访问控制 - 允许 - 来源＆＃39;标题出现在请求的上资源

好像没有设置CORS配置。

如果我删除了crossOrigin属性，我可以编写我的图像但是我不能使用toDataURL（）来获取图像数据（这很有意义）。

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

由于

Answer 1

Chrome阻止了Cross Origin Querys。

您可以使用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 *;
}

您可以使用德语http://i.imgur.com/flT3oJ1.jpg阅读。

Answer 2

哇，我弄清楚问题是什么。

我正在请求外部资源两次（第一次检查图像是否存在，第二次将请求放入画布）。在第二次调用时，浏览器缓存了图像。所以我猜画布因为这个图像的来源（浏览器的缓存）而无法绘制图像。

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

crossOrigin属性搞乱Chrome上的外部图像检索

2 个答案: