Client-Side script to read and manipulate image from the web (details...)

Question

I want to be able to use a Greasemonkey script that can take an image from a page, scan it for the darkest pixel, and then return those coordinates to the browser.

Originally, I used a flash script... Greasemonkey embedded a local flash file that would fetch the image based on a URL in the source of the webpage, use ActionScript to get the darkest pixel, and then send a POST request with those coordinates as values.

The problem is, I only want to download the image one time. With this method, it does it twice (once in browser, once in flash). Is there a way to manipulate an image from a webpage within Javascript or with another client-side language? I tried using a Canvas, but you cannot perform the getImageData() function on images hosted on remote servers.

Answer 1

You could load it in flash only, and do with your image whatever you want, then if you need to show it in the page you could encode the image as base64 string of the PNG (you will need AS libraries for PNG and base64 encoding).

The next step would be to pass the string to javascript, and in Javascript you could take advantage of the ability to embed base64 images (supported in Firefox, opera, not IE).

The syntax is:

<img src='data:image/png;base64,ABCDE...'>

where "ABCDE..." is the base64 string generated in flash.

This way you would only get the image once, but still will be able to show it as a normal html image.

I used this technique in a pet project i created (www.creationempire.com/tstyles) to generate the images in a online image generator, and got the original idea from http://danielmclaren.net/2008/03/embedding-base64-image-data-into-a-webpage

Hugo