javascript - 允许访问控制允许来源 : * in pure javascript

Question

所以我一直在用 javascript 开发一个有趣的在线图像效果程序，用户输入图像的 url 并点击“回车”，图像就会绘制在屏幕上，然后用户可以运行一些效果其上，例如g表示灰度，b表示模糊等。

我的问题是控制台打印出:

Redirect at origin [origin] has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

或者:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

我研究了这个问题的许多答案，并在我的 Chrome 浏览器中添加了一个扩展程序，以实现跨域资源共享，并且我的网页运行良好(几次重新加载后)。

我发现的所有解决方案都需要在 Chrome 中启用跨域资源共享选项，或者使用某种 php 和 ajax 调用来启用此选项。 由于我在 jsbin 上编写代码，所以我专门寻找可以用纯 JavaScript 完成的解决方案，但我还没有找到任何可行的解决方案。如果您对可行的方法有任何想法，或者有消息称没有可能的解决方案，我们将不胜感激。

我的代码:

var background, context, image;
var docwidth, docheight;

image = new Image();
image.src = $('#image-src').val();
image.crossOrigin = "anonymous";

docwidth = $(document).outerWidth(true);
docheight = $(document).outerHeight(true);

background = document.getElementById("background");
context = background.getContext("2d");

image.onload = function() {
  background.width = docwidth;
  background.height = docheight;
  context.drawImage(image,0,0,image.width,image.height, 0, 0, docwidth, docheight);
};

function change_image_src(src) {
  image.src = $('#image-src').val();
}

// ... more image effect functions ...

function grayscale() {
  var data = context.getImageData(0, 0, background.width, background.height);
  var pixels = data.data;

  for (var x = 0; x < data.width; x++)
    for (var y = 0; y < data.height; y++) {
      var i = (y * 4) * data.width + x * 4;
      var avg = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
      pixels[i] = avg;
      pixels[i + 1] = avg;
      pixels[i + 2] = avg;
    }
  context.putImageData(data, 0, 0, 0, 0, data.width, data.height);
}

$(document).keydown(function(e) {
  switch (e.which) {
    // ... other cases ...
    case 71: // g
      grayscale();
      break;
  }
});

顺便说一句，我确实有 image.crossOrigin = "anonymous";

提前致谢!

Answer 1

为了在 Canvas 上使用来自其他来源的图像而不污染它，必须使用 CORS header 提供图像。 This page on MDN解释了这一点，但本质上，当提供图像时，它必须附带一个 Access-Control-Allow-Origin header ，允许页面的来源(可能通过 *通配符)。

除非以这种方式提供图像，否则将其放入 Canvas 中会污染它，并且您将无法使用 getImageData。

所以这真的不是 JavaScript 的事情；图像的提供方式决定了您如何使用它。