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

Question

OK, so I'm trying to take an image on my machine and manipulate it using a canvas and some JS... However, I keep getting the error:

"Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access. "

I thought that if I didn't modify the original image, and only modified a copy of the image data, I would be ok. But for some reason, it still doesn't work. Anyone know what I should do? This is the code I have currently:

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

You are very likely have this page opened simply by double clicking the html file. and not on a local server, which you can easily start and get such as nodejs or wamp.

You can not load images from file source it results in origin of image being different from origin of domain.

This is called Tainted canvas, more on this here: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

It means that for security reason you are not allowed to access canvas data. http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules