Question

好的，所以我试图在我的机器上拍摄图像并使用画布和一些JS操作它......但是，我一直收到错误：

＆＃34;来自原文的图片＆＃39; file：//＆＃39;已被跨源资源共享策略阻止加载：响应无效。起源＆＃39; null＆＃39;因此不允许访问。＆＃34;

我认为如果我没有修改原始图像，只修改了图像数据的副本，我会没事的。但由于某种原因，它仍然无法奏效。谁知道我应该怎么做？这是我目前的代码：

$(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。

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

这称为Tainted canvas，更多内容如下：https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

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

使用html canvas和JS操作图像上的像素数据

1 个答案: