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;
Reduced in width using scaling:
Reduced in width using content aware image resizing:
In some situations, I think this effect is potentially very useful.