After my post about the various content-aware image resizing projects I couldn’t resist to take a closer look at Joa Ebert’s ImageResizing class and take him on his word “If you can improve something do not be shy and post it”. I just love code optimizing and saw several points to attack.

First I replaced the loop that moved the pixels via getPixel()/setPixel() by a displacementMap filter. The additional benefit of this is that I can use the same displacement map on the grayscale map which is used for the energy calculation so it just needs to get calculated once. It is even possible to apply it to the energy map, too but that map should only be used for a few carves and then get recalculated. Otherwise artifacts will show up quickly.

Another part I changed is the energy function itself. I’m not sure if that improves the speed, but I think it improves the seam selection quality. Instead of a convolution filter I blur the image first and then draw() it onto itself offset by a few pixels with difference mode. The idea behind this is that this will keep strong edges but does not emphasize noise and small patterns as much.

Here is the optimized ImageResizing AS source. And here’s a demo of the optimized version:

1, 2, 3, 4 different Seam-Carving implementations in one weekend, all made in Flash… One could say “oh what a coincidence”, but I must say that I saw this coming the moment I watched that awesome video demo of Shai Avidan and Ariel Shamir’s image resizing method. We wouldn’t be Flash developers if seeing something like that didn’t immediately trigger that “oh, I can build that in Actionscript, too - darn I just need a free weekend for that”.

I don’t know who deserves the “first as3 implementation” title, but since that race is over it’s now time to create the fastest and the best quality versions. Go for it guys!

Oh yes BTW - where’s the Silverlight version of this?

I’m very happy about Yahoo/flickr’s great move to implement crossdomain.xml on their flickr image servers. This finally allows to use the BitmapData.draw() command with images downloaded from flickr.com without having to route it through a proxy on your own domain first. For me this means that I will save a lot of traffic on my various mashups and on top of that the download of the images should even be quicker.

One thing you have to watch out for if you are going to adapt your old AS2 code to these changes is that it is not enough to just download the images directly. You will have to instruct Flash first to download the new policy files from the flickr servers whenever it tries to access them. Since flickr distributes its images across several servers that have different domains like http://farm2.static.flickr.com, http://farm3.static.flickr.com and so on the easiest way to accomplish that is to use the MovieClipLoader class and to set its checkPolicyFile property to “true”. This will instruct Flash to check for the crossdomain.xml file automatically on the respective server. Here’s a simple AS2 example:

import flash.display.BitmapData;

var holder:MovieClip = createEmptyMovieClip(”test”,0);
var mcl:MovieClipLoader = new MovieClipLoader();
mcl.checkPolicyFile = true;
mcl.loadClip(”http://farm2.static.flickr.com/1395/776413036_ea6bf98846_m_d.jpg”,holder);
mcl.addListener( this );

var holder2:MovieClip = createEmptyMovieClip(”test2″,1);

function onLoadInit()
{
var bm:BitmapData = new BitmapData( holder._width,holder._height,false,0)
bm.draw(holder);
holder2.attachBitmap(bm,0);
holder2._x = holder._x + holder._width + 2;
}

The alternative way would be to use System.security.loadPolicyFile() but you will have to do that for every farm that you access - it is not enough just to load it from http://static.flickr.com/crossdomain.xml

For the AS3 way of dealing with this I recommend you Abdul Quabiz’ old post about this topic.