我使用 Canvas 来显示图像并使用 getImageData() 获取该图像特定部分的信息。根据我设置图像参数的顺序,它是否有效。
通过文档正文上的 onload
调用该方法。这是代码:
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "url_to_image";
img.crossOrigin = "anonymous";
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage( img, 0, 0 );
var data = document.getElementById('canvas').getContext('2d').getImageData( 310, 320, 1, 1 ).data
}
}
这会触发以下跨源错误:
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
我从中取回图像的服务器配置为向我设置带有图像的 Access-Control-Allow-Origin:*
响应 header 。
但是,如果我在 image.src
之前设置 img.crossOrigin
,一切都会正常工作:
img.crossOrigin = "anonymous";
img.src = "url_to_image";
这对我来说似乎很奇怪。有人知道发生了什么吗?
最佳答案
.crossOrigin 必须位于 .src 之前
这是因为 .src 实际上开始下载。
浏览器在开始下载时必须知道是否允许匿名访问,否则将默认不允许跨源访问。
现代浏览器(FF、Chrome、Safari、Opera、Android)几乎完全支持跨源共享。 Opera 迷你版是唯一不支持的主要浏览器。
而且,正如您所发现的,传输数据的服务器必须配置为发送适当的 header ,让浏览器知道允许交叉共享。
关于javascript - CORS 错误取决于图像参数设置顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22692917/