ImageMagick Stepped Opacity Demo

The Stepped Opacity Demo is a nice image processing technique I saw used on eZ publish’s (http://ez.no) web interface. The image has a few white rectangles of increasing opacity at the bottom.

This demo has a really nice image from flickr.com (credit on the page), with the rectangles on it. It also allows you to click on the image and have it return the color of the pixel.

Lessons learned:

  • This took four hours. That’s about three more than I was expecting. The image part was easy, it was the pixel color that took the time. Even then, it only works in FireFox. Good enough.
  • Getting an accurate pixel location was affected by padding and margins. I zeroed them.
  • A crosshair cursor on the image made it easier to see the click point.
  • The next version will probably allow the image to be uploaded so the pixel tool will be more useful.
  • An RGB to HSV converter would be nice as well.