Client side script to read and manipulate an image from the internet (more ...)
I want to use a Greasemonkey script that can display an image from a page, scan it for the darkest pixel, and then return those coordinates to the browser.
I originally used a flash script ... Greasemonkey has embedded a local flash file that will fetch the image based on the url in the web page source, use ActionScript to get the darkest pixel, then send a POST request with those coordinates as values.
The problem is, I only want to download the image once. With this method, it does it twice (once in the browser, once in flash). Is there a way to manipulate an image from a webpage in Javascript or another client-side language? I tried using Canvas, but you cannot execute getImageData () function for images hosted on remote servers.
You can only load it in flash and do whatever you want with your image, and then if you need to display it on the page, you can encode the image as a base64 PNG string (you need the AS libraries for PNG and base64).
The next step is to pass the string to javascript, and in Javascript you can use the ability to embed base64 images (supported in Firefox, opera, not IE).
Syntax:
<img src='data:image/png;base64,ABCDE...'>
where "ABCDE ..." is the base64 string generated in flash.
This way you will only get the image once, but you can still display it as a normal html image.
I used this technique in a home project I created ( www.creationempire.com/tstyles ) to create images in an online image generator and got the original idea from http://danielmclaren.net/2008/03/embedding-base64-image-data -into-a-webpage
Hugo
source to share