使用 html canvas 和 JS 处理图像上的像素数据

Question

好的，所以我正在尝试在我的机器上拍摄图像并使用画布和一些 JS 对其进行操作...但是，我不断收到错误消息：

“来自 'file://' 的图像已被跨域资源共享策略阻止加载：无效响应。因此不允许访问 'null' 源。”

我想如果我不修改原始图像，而只修改图像数据的副本，我就可以了。但由于某种原因，它仍然不起作用。有谁知道我应该怎么做？这是我目前的代码：

$(document).ready(function() {
  var canv = document.getElementById("img_canvas");
  var ctx = canv.getContext("2d");
  var img = new Image();
  img.crossOrigin = "Anonymous";
  img.src = "img/meAndTheOcean.jpg";

  $(img).load(function() {
    ctx.drawImage(img, 0, 0);
    var img_data = ctx.getImageData(0,0,canv.width, canv.height);
    var pixels = img_data.data;
    var npixels = img_data.width * img_data.height;
    var cpyPixels = ctx.createImageData(img_data.width, img_data.height);
    for (var i = 0; i < npixels; i++){
      cpyPixels[i*4] = 255 - pixels[i*4];
      cpyPixels[i*4 + 1] = 255 - pixels[i*4 + 1];
      cpyPixels[i*4 + 2] = 255 - pixels[i*4 + 2];
    }
    ctx.putImageData(cpyPixels,0,0);
  });
});

Answer 1

您很可能只需双击 html 文件即可打开此页面。而不是在本地服务器上，您可以轻松启动和获取，例如 nodejs 或 wamp。

您无法从文件源加载图像，这会导致图像的来源与域的来源不同。

这被称为被污染的画布，更多信息在这里：https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

这意味着出于安全原因，您不允许访问画布数据。 http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules