29 Nov

Cross-domain getImageData API using Google App Engine

29. November 2010 by Max Novakovic

$.getImageData is a jQuery plug in that allows you to get an image from anywhere on the internet and use it as if it came from your domain. This should prove useful for anyone who has come across the cross-domain policy enforced by browsers on the Canvas tag. The service uses a Google App Engine project to fetch the image and return it as a JSON-formatted data URL.

getImage1 I created the plug-in and service so that anyone wishing to take images from somewhere like Flickr or Google Image Search can do so without having to bother to create a proxy or fiddle with the server. David DeSandro’s Close Pixelate (the effects pictured here) uses the Google App Engine service to enable it’s users to process images from other domains. Another novel use of the plug in is on Pete Goodman’s website; when the Konami Code is pressed, the whole website turns black and white including any images from other domains. Read more about it here.

Some of the common error codes that come up when trying to get an image from another domain are;

Firefox: Security error code: 1000

Chrome: Uncaught Error: SECURITY_ERR: DOM Exception 18

Safari: SECURITY_ERR: DOM Exception 18: An attempt was made to break through the security policy of the user agent.

getImage2 So, if you have ever come across one of these errors, then have a look at the documentation for $.getImageData which includes information on how to use the jQuery plug in and how to use the Google App Engine service using no javascript library. There are also two basic examples, one of which gets images from Flickr and analyses them to get their average colour (pictured here). The complete code is also on GitHub which includes example code for the server in PHP and Python in case you want to implement your own version of the server side program.

Subscribe to newsletter:

RSS Feed



Archive: