context.getImageData() operation is insecure

Question

I want to realize a simple greyscale filter for HTML5 canvas, but I canot grab the Image data as pixels. I get security warnings from FF and Chrome. Finally the filter does not make the image grey.

JS FIDLE CODE

js:

    var canvas = document.getElementById('canvas');       
var context = canvas.getContext('2d');  

var image = new Image();
image.onload = function () {
  if (image.width != canvas.width)
    canvas.width = image.width;
  if (image.height != canvas.height)
    canvas.height = image.height;
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  filter(imageData);
  context.putImageData(imageData, 0, 0);
}
image.src = "http://i0.gmx.net/images/302/17520302,pd=2,h=192,mxh=600,mxw=800,w=300.jpg";

function filter(imageData){
 var d = imageData.data;
   for (var i = 0; i < d.length; i += 4) {
     var r = d[i];
     var g = d[i + 1];
     var b = d[i + 2];
     d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3;
   }
return imageData;
}

Answer 1

This is a security feature. From W3:

The getImageData(sx, sy, sw, sh) method must, if the canvas element's origin-clean flag is set to false, throw a SecurityError exception

This is to prevent malicious site owners from loading potentially private images that the user's browser has access to onto the canvas, then sending the data to their own servers. The origin-clean can be turned off if:

• The element's 2D context's drawImage() method is called with an HTMLImageElement or an HTMLVideoElement whose origin is not the same as that of the Document object that owns the canvas element.

• The element's 2D context's drawImage() method is called with an HTMLCanvasElement whose origin-clean flag is false.

• The element's 2D context's fillStyle attribute is set to a CanvasPattern object that was created from an HTMLImageElement or an HTMLVideoElement whose origin was not the same as that of the Document object that owns the canvas element when the pattern was created.

• The element's 2D context's fillStyle attribute is set to a CanvasPattern object that was created from an HTMLCanvasElement whose origin-clean flag was false when the pattern was created.

• The element's 2D context's strokeStyle attribute is set to a CanvasPattern object that was created from an HTMLImageElement or an HTMLVideoElement whose origin was not the same as that of the Document object that owns the canvas element when the pattern was created.

• The element's 2D context's strokeStyle attribute is set to a CanvasPattern object that was created from an HTMLCanvasElement whose origin-clean flag was false when the pattern was created.

• The element's 2D context's fillText() or strokeText() methods are invoked and end up using a font that has an origin that is not the same as that of the Document object that owns the canvas element.

Source

Answer 2

Here's an answer that actually solves the problem:

After creating the new Image, use

image.crossOrigin = "anonymous";