允许访问控制允许源代码：*在纯javascript中

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

我的问题是控制台会打印出以下内容之一：

原点重定向[原点]已被阻止加载 跨源资源共享策略：无“访问控制允许源” 请求的资源上存在标头。原点“null”为空 因此不允许访问

或：

未捕获的安全性错误：无法在上执行“getImageData” “CanvasRenderingContext2D”：画布已被污染 跨来源数据

我研究了这个问题的许多答案，并在我的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;
  }
});

var背景、上下文、图像；
var docwidth，docheight；
图像=新图像（）；
image.src=$（'#image src'）.val（）；
image.crossOrigin=“匿名”；
docwidth=$（文档）.outerWidth（true）；
docheight=$（文档）.outerHeight（真）；
后台=document.getElementById（“后台”）；
context=background.getContext（“2d”）；
image.onload=函数（）{
background.width=docwidth；
background.height=8；
context.drawImage（image，0,0，image.width，image.height，0,0，docwidth，docheight）；
};
函数更改\u图像\u src（src）{
image.src=$（'#image src'）.val（）；
}
// ... 更多图像效果功能。。。
函数灰度（）{
var data=context.getImageData（0，0，background.width，background.height）；
var像素=data.data；
对于（var x=0；x

顺便说一句，我有image.crossOrigin=“匿名”

---

提前谢谢

为了在画布上使用来自另一个来源的图像而不污染它，图像必须带有CORS标题。解释它，但本质上，当提供图像时，它必须附带一个

Access Control Allow Origin

标题，允许页面的原点（可能通过

*

通配符）

除非以这种方式提供图像，否则将其放入画布将污染图像，并且您将无法使用

getImageData

---

所以这不是一个JavaScript的东西，真的；图像的服务方式决定了您可以如何使用它。

我使用CORS代理服务器解决了这个问题：

跨源资源共享由服务器控制-任何绕过这些措施的chrome黑客都是黑客，如果网站可以授权，那么同源策略将是多么毫无意义允许自己从其他网站读取数据？没错。它需要客户端和服务器的参与。如果你只使用JS就可以使用其他服务器上的资源，那么就不必再使用CORS策略了。有没有办法使用jsbin或任何其他html/css/JS托管服务器来提供CORS头？@OfekGila:再说一次，如何提供html/css/JS并不重要。重要的是如何为形象服务。您的代码似乎允许人们提供任何图像URL，以便您可以对其进行灰度缩放。只有当它们提供的图像与CORS头一起提供时，这才起作用。唯一的解决方法是，如果你有一个服务器，向它发送URL，让它请求图像，然后将图像发送到你的页面——然后，因为它来自你的源，你可以使用它而不会污染画布（或者如果你想让你的页面托管在其他地方，你可以使用标题）。你需要一个服务器。@T.J.Crowder：好的，非常感谢。那个豆子认为网页会根据图像工作吗？@OfekGila:是的。如果图像带有CORS标题，则不会污染画布。