Content Aware Image Resizing for ASP.NET

Content Aware Image Resizing (also known as seam carving) is an algorithm, developed by Shai Avidan, which resizes an image by removing seams (paths of least importance) to reduce image size, or inserting seams to extend it. This is nice because it allows you to crop images without missing important details.

I didn't know about this technique until a friend pointed me in the direction of CAIR, an open source implementation of seam carving. Never one to turn a blind eye to unnecessary but cool software, I have added a ContentAwareResizeFilter to my fork of DynamicImage (DynamicImage is an open source image manipulation library for ASP.NET - there's some getting started documentation here). ContentAwareResizeFilter simply calls the CAIR executable, so the credit for all the hard work goes to Brain Recall.

An example might make things clearer. Here is the original image:

Here is the image reduced in width using scaling:

And here is the image reduced in width using content aware image resizing:

The DynamicImage markup for the final image above is:

<sitdap:DynamicImage runat="server">
    <Layers>
        <sitdap:ImageLayer SourceFileName="~/Assets/Images/sunset.jpg">
            <Filters>
                <sitdap:ContentAwareResizeFilter Width="350" ConvolutionType="V1" />
            </Filters>
        </sitdap:ImageLayer>
    </Layers>
</sitdap:DynamicImage>

If you don't use web forms, you can use the fluent interface in code:

string imageUrl = new DynamicImageBuilder()
    .WithLayer(
        LayerBuilder.Image.SourceFile("~/Assets/Images/sunset.jpg")
        .WithFilter(FilterBuilder.ContentAwareResize.ToWidth(350))
    ).Url;

Here's another example (you might recognise this one from the Wikipedia article, but the images below are created using DynamicImage). The original image:

Reduced in width using scaling:

Reduced in width using content aware image resizing:

In some situations, I think this effect is potentially very useful.

If image manipulation in ASP.NET interests you, you might be interested in my previous posts on creating PDF thumbnails and creating website thumbnails.

5 comments

Grant
Dec 13, 2010
18:59

Looks like a great component but I can’t get it to work. Downloaded the DynamicImage v0.9, made reference to the dll, control is loaded in the toolbox, I copied your code example and naturally changed all necessary values but cant get the to work, using visual studio 2010 asp.net vb and c#

Tim Jones
Dec 30, 2010
03:17

The content aware resizing filter was added to my own fork of Dynamic Image, so it is / was necessary to grab my fork of the source and build it yourself. However, after discussion with the project owner, we have updated the official download to include this filter (as well as the PDF and website screenshot layers).

You can grab the download from here (you'll need the "Full" version): https://github.com/sitdap/dynamic-image/downloads

Jim Geurts
May 3, 2011
21:41

I'm having some troubles trying to get this to work using the v1.0.6 DynamicImage.Core nuget and v1.0.0.0 DynamicImage.Extensions.ContentAwareResizing nuget.

My code looks something like:

ResizeFilterBuilder resizeFilter; if (item.Height < 150 || item.Width < 150) { resizeFilter = FilterBuilder.Resize.To(150, 150); } else { resizeFilter = ContentAwareResizeFilterBuilder.Resize.To(150, 150, true); } var thumbnailLayer = LayerBuilder.Image.SourceFile(fullFilename).WithFilter(resizeFilter).ToLayer();

FilterBuilder.ContentAwareResize is not recognized, so I went with the above method.

It doesn't appear the it is using the content aware resize technique. Is there a better way to accomplish what I want or am I missing something?

Thanks,

Jim

Tim Jones
May 5, 2011
21:16

@Jim With the code above, the static "Resize" property of either FilterBuilder or ContentAwareResizeFilterBuilder will give you a normal ResizeFilterBuilder. Ideally, I'd like to have a static ContentAwareResize property on the base FilterBuilder class, but since ContentAwareResizeFilterBuilder is defined in the extensions library, and FilterBuilder is defined in the core DynamicImage library, C# won't allow that.

So instead, you need to do something like

new ContentAwareResizeFilterBuilder().To(width, height) new ContentAwareResizeFilterBuilder().ToWidth(width) new ContentAwareResizeFilterBuilder().ToHeight(height)

Hope that helps.

Jim Geurts
May 6, 2011
01:48

@Tim Excellent, that will work! Thanks for your help and this awesome extension!

Make a comment

Sorry, commenting has been temporary disabled because of spam. If you have any questions, you can email me, and you can also find me on Twitter.