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.


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 Comments on “ImageHandler”

  1. […] walkin’ thru life… AboutImageHandler « A […]

  2. […] project for an httphandler to apply filters to images.  Something I need for work.  I have the project’s homepage here at my blog for lack of a better location.  And I also added a page in the wiki at github for good measure.  […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s