25

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:

const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); const 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); const 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){ const d = imageData.data; for (let i = 0; i < d.length; i += 4) { const r = d[i]; const g = d[i + 1]; const b = d[i + 2]; d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3; } return imageData; }
Improve this question
1
  • BTW, if you want to handle this error correctly you should use try catch. Commented May 30, 2015 at 13:46

2 Answers 2

Reset to default
16

Here's an answer that actually solves the problem:

After creating the new Image, use

image.crossOrigin = "anonymous";
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

For me it works in Chrome but not in Firefox
Same here, Firefox doesn't seem to respect this.
Actually, it works, but you must set crossOrigin before setting src.
Does not work in Firefox in 2023
FWIW, it works for me in Ubuntu Firefox 121.0.1, e.g. here's a JS Fiddle with an updated image link and @stackers code fix applied: jsfiddle.net/5hLxjzu9/11
13

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

Improve this answer

6 Comments

so how can I get the data now?
@daisy: By fetching the remote image from the server the page is being loaded from, and having the JavaScript load the image from that server. This ensures that you're accessing a non-private image.
adding crossorigin="anonymous" solved the issue for me
That should be image.crossOrigin = "anonymous" (capital O).
It works in Chrome but not in Firefox.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.