Hey,
The demonstration video of seam carving indicated that images should be considered at par with text on web pages, and should react to resizing just like text, by automatically adjusting to the available width. With many people implementing seam carving, I picked up a couple of implementations and tried to apply this technique to real web pages. Most of the implementations that I found were executables. There was one good flash implementation that could be used in real web pages.
This article (and this label) suggests some alternatives to make seam carving realistic. I have not had time or server space to implement them all, so I just thought of putting down the steps in text, and a crude demo of what I was able to achieve. As I find more time this week, I would try to refine the demo to something more usable.
Firstly, the <IMG> tag does not allow manipulation of an image at a pixel level. Hence, till the browsers come out with native support for re-targeting, web page will have to squeeze in this functionality using the limited JavaScript support available. That leaves us with two alternatives.
All the <IMG> tags on the page could be simply replaced with a Flash object, or the HTML5 canvas element. These are the two tags that allow manipulation of an image at a pixel level. However, I discovered that the entire process of finding the energy function and subsequently, the seam are very costly processes. I tried to implement a Soble Filter in JavaScript to find the edges, but the browser easily gave up. The flash implementation seemed to work fine. Nevertheless, the operations seem to freeze the browser for some time.
Hence, it may be worthwhile to find the seam at the server, and just pass down the data structure that represents the seam to the client.
Now, all the client has to do is to replace the images that have to be resized with an canvas of equal dimensions, the image drawn on it. When the image is resized, the JavaScript kicks in, removing 'n' seams from the image, where n equals to the difference of the original width and the changed width.
I tried this out for a HTML page, but found that the dynamism that was shown the the video seemed a little tough to achieve. The canvas was very jittery, did not refresh when a new image was drawn, and seemed to hang the browser. Also, the sobel filter that I had used for the energy function was not great with many images.
My demo is currently hosted here, and watch out for updates to the demo.
