How do you convert a color image to black/white using Javascript?

Question

How do you convert a color image to black/white using only Javascript?

AND, also make it cross compatible in most browsers because I hear Internet Explorer has a "filter" mechanism but no other browsers support it.

Answer 1

Despite my initial scepticism it appears that such magic is indeed possible, using the new Canvas functionality in some browsers.

This page shows how to do it using browsers that support Canvas:

http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html

For IE you need to use filters, there is an example of doing greyscale here:

http://www.javascriptkit.com/filters/basicimage.shtml

Answer 2

The way I would do it is to set the src of the img to point to a server-side PHP script

eg.,

<img src="http://mysite/grayscale.php?url='...'

That script fetches the image, runs some GD code, and returns a JPG. Something like this

Answer 3

Canvas is indeed the best client-side solution to this problem, and I just wanted to point out that, for IE, you can actually use the google exCanvas project which translate canvas commands into the proprietary Microsoft XML-based vector language, VML.

http://excanvas.sourceforge.net/