在纯JavaScript中允许Access-Control-Allow-Origin:*

Question

所以我一直在用javascript开发一个有趣的在线图像效果程序,用户在图像中输入一个url并点击"enter",在屏幕上绘制图像,然后用户可以在其上运行一些效果,例如g表示灰度,b表示模糊等.

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

已通过跨源资源共享策略阻止原点[origin]的重定向加载:请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许原点'null'访问.

要么:

Uncaught SecurityError:无法在'CanvasRenderingContext2D'上执行'getImageData':画布已被跨源数据污染.

我查看了这个问题的许多答案,并添加了我的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 ="匿名";

提前致谢!

Answer 1

为了在画布上使用的图片来自其他产地没有玷污它,图像必须提供与CORS标头.MDN上的这个页面解释了它,但基本上,当提供图像时,它必须附带一个Access-Control-Allow-Origin标题,允许页面的来源(可能通过*通配符).

除非图像服务这种方式,把它在画布会玷污它,你将无法使用getImageData.

所以这不是一个JavaScript的东西,真的; 这是图像的服务方式,决定了如何使用它.

Answer 2

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