Allow getImageData from remote images

Posted on January 19, 2020

Today I've learned how to allow the browser when using the canvas method getImageData if the image has been loaded remotely.

I've found the trick here and it's quite straightforward:

Give the following snippet to download an image:

const img = new Image()
img.src = 'http://www.example.com/image.jpg'
img.onload = () => {
  // performe some manipulation
}

You need to add img.crossOrigin = "Anonymous" to the loader object:

const img = new Image()
img.crossOrigin = "Anonymous"
img.src = 'http://www.example.com/image.jpg'
img.onload = () => {
  // performe some manipulation
}

It's just work!