ImageHandler

Image Handler Project

This page will serve as the project home page for my little http handler image filtering project.  I needed a way to offer lightweight image filtering in a image gallery plugin I wrote in jQuery for work.  The users already have zoom in/out capabilities but the boss wanted the toolbar to offer sliders for stuff like contrast and exposure.

Research into this led me to the new HTML5 canvas element and its 2D context’s getImageData method, which returns the pixel data for an image in the canvas.  This of course would facilitate pixel editing for the filters.  In fact I found a ready made set of filters in the wonderfully done Pixastic Image Editing Library that has a very large set of actions [filters] that I could have used.  But, IE strikes again with zero support for the canvas element.  And, while there is the IE Canvas project which offers some canvas support in IE [using VML] there is no getImageData/putImageData which is key to the filtering.  So, back to the drawing board.

Well I decided to a backend/server-side process to get the job done.  So I am going to use an httphandler to serve the images with necessary filtering applied.  They can then be src’d directly into the html on the page and I should be able to still use javascript in my plugin to drive the filtering using querystring parameters for the handler.

I am shooting for something like this:


<img src=”images/myimage.jpg?contrast=45&exposure=99″ />

Where the httphandler will load up the image and apply the filter settings according to the values in the querystring and return it as the appropriate content type [according to the extension/file type].  I hope.

Specifics

I will host the code on Github and for now this page will be the project home page, and of course I will post about progress in the main blog under a category for the ImageHandler project.  Off I go!

2 thoughts on “ImageHandler

Leave a Reply

Your email address will not be published. Required fields are marked *