CODEWITHSUNDEEP
javascriptimagehtmlcanvas
Gan
Gan

Reputation: 99

How to draw an image directly to an ImageData array - HTML5/Javascript

My problem:
I'm making an HTML5 game and am attempting to make it faster by drawing the background once instead of having it redrawn every frame.
To do this I drew the background on the canvas and then attempted to get an ImageData from it. Unfortunately I was stopped by a Security Error. Unable to, because the image is from an external source.
I've researched this and it seems that this is a "feature" to stop bad people from stealing content from the user's hard drive. Though these images I loaded aren't from the hard drive.

I would really love to be able to speed up my game. Is there a solution to go around the security error or maybe even to load the image directly into an image data so I can draw by looping through pixels?

(Note: I do not want to have to mess with multiple canvases to get the job done)

Thanks, Gan

Upvotes: 1

Views: 635

Answers (1)

Delta
Delta

Reputation: 4338

There is no way around that, though you can draw an image from another domain the use of getImageData will always raise a security error in that situation. That is to prevent stealing of sensitive information since web sites can generate dynamic images containing private user information based on cookies or IP address. However, you could simply use a server side script to proxy the image.

But honestly getImageData and putImageData are fairly slow, I don't see how that could speed up your game. It seems to me that you think drawing an image data is faster than simply using drawImage, it's not.

You will have to redraw everything if you want your animation to look good anyway, that's the way animation works.

Upvotes: 1

Related Questions