允许 Access-Control-Allow-Origin: * in pure javascript

Question

所以我一直在 javascript 开发一个有趣的在线图像效果程序，用户在图像中输入 url 并点击 'enter'，图像就会被绘制出来在屏幕上，然后用户可以运行对其进行一些效果，例如 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 上使用来自另一个来源的图像而不污染它，图像必须 served with CORS headers。 This page on MDN 对此进行了解释，但本质上，当提供图像时，它必须附带一个 Access-Control-Allow-Origin header 以允许您的页面来源（可能通过 * 通配符).

除非以这种方式提供图片，否则将其放入 canvas 会污染它，您将无法使用 getImageData .

所以这不是 JavaScript 的事情，真的；图片的 服务方式 决定了您可以如何使用它。

Answer 2

我使用 CORS 代理服务器解决了这个问题：http://crossorigin.me/

允许 Access-Control-Allow-Origin: * in pure javascript

Allow Access-Control-Allow-Origin: * in pure javascript

javascript

google-chrome

image

getimagedata