CORS错误取决于图像参数的设置顺序

Question

我使用画布来显示图像，并使用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
  }
}

这会触发以下的crosorigin错误:

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

我从中获得图像的服务器配置为为我设置一个带有图像的Access-Control-Allow-Origin:*响应头。

然而，如果我只是在image.src之前设置img.crossOrigin，一切都可以正常工作:

img.crossOrigin = "anonymous";
img.src = "url_to_image";

这对我来说似乎很奇怪。有人知道发生了什么吗?

Answer 1

。crossOrigin必须位于。src

之前

这是因为。src实际上开始下载。

浏览器在开始下载时必须知道是否允许匿名访问，否则它将默认不允许跨域访问。

现代浏览器(FF,Chrome,Safari,Opera,Android)几乎完全支持跨源共享。迷你版Opera是唯一不支持的主流浏览器。

并且，正如您所发现的，交付数据的服务器必须配置为发送适当的头，以让浏览器知道允许交叉共享。