Question

I’m working on an online app to manipulate images.
It works fine when doing it with local files (on the server) but as soon a I try it with another source it breaks.
The reason for this seems to be a security limitation, qoute from whatwg:

Whenever the getImageData() method of the 2D context of a canvas element whose origin-clean flag is set to false is called with otherwise correct arguments, the method must raise a SECURITY_ERR exception.

So I wonder can I get around this somehow?
The images will all come from a google API, and I really want to skip saving the images if i can.

Thanks.

Answer 1

Since you probably don’t have access to the server(s) where the source images are being pulled from, your best bet is to proxy the files through your server.

Essentially, you send an AJAX request to your server with the URL of the image you want data from. Your server receives the request and asks for the image on your behalf. When it obtains the file, it then base64 encodes it and sends the data back to you. Since the image data is just a string, you can create an image object out of it and manipulate it via a canvas without worrying about the originating domain.

If you’re willing to use jQuery, there’s a great plugin that will do exactly this located here: http://www.maxnov.com/getimagedata/

I’ve used this particular plugin before with excellent results. I will note that you should (must) host the proxy server code on your own server. You can use the author’s appspot account, but it’s limited to some number of queries per day and frequently runs out. The author explains how to host the proxy code yourself here: http://www.maxnov.com/getimagedata/#using-your-own-server