Hey,
A couple of days back, I saw an paper on Context Aware Image Resizing by Dr. Ariel Shamir and Dr. Shai Avidan. The concept seemed interesting, and the demonstration video showed some example of how effective context aware image resizing can get. There were people asking for it as a feature in Photoshop.
I was wondering if this could be a useful in HTML pages. Thats how I sat down and started writing quick Javascript to see this magic for images in HTML page. The algorithm over all is simple; the only complexity lies in defining the energy function. This article explains the architecture of the JavaScript code and its functionality of the HTML image resizing code that I am writing. As soon as I give the final touches to the HTML code, I would put it out.
The JavaScript code is non-obtrusive, and requires HTML 5 Canvas element. It does nothing if HTML 5 is not supported. Consider an image is defined using a tag like <image src = "blah" class="autoresize" style = "height : 100; width : 100" >
A wrapper JavaScript class reads the HTML for all the image tags with the specific classname, and initializes them to a ImageResize class. As initialization, the image resize calculates the energy function (that can be customized), then the horizontal and vertical seams using dynamic programming as described in the paper. It then redraws the entire image for that particular dimension. The resize is also captured to enable dynamic image resizing, one of the "wow" factor of the paper.
The script gets a little slow if given a lot of images, and I am looking at way to increase the speed. Watch out for live example that I will post later.
