Recoding

What is?

ImageHandler is a .NET library for on-the-fly image manipulation, based on WPF, that allows you execute a set of transformations to an original, fullsize image, and to stream out the result to the client without the needs of miniature files creation or any sort of manual modifications.

The library is composed by a core manipulation library, an HttpHandler, an MVC3 Html Helper and a WebForm Custom Control.

There are some demos using the MVC Helper, and here is the web control version.

Scale

One of the most typical use is to build miniatures from an original image (this, for example).

I'll just call the helper and tell to it the desired dimensions.

// Scale only the width (height recalculated proportionally)
@Html.ImageHandlerMVC("~/Images/photo_1.jpg", Width: 220)

// Scale only the height (width proportionally)
@Html.ImageHandlerMVC("~/Images/photo_1.jpg", Height: 250)

// Scale in both dimensions, causing image stretch
@Html.ImageHandlerMVC("~/Images/photo_1.jpg", Height: 250, Width: 250)

Crop

I could want to crop the image, to show a rescaled partial part of the original image (this).

// Crop to 250 width: it'll create a squared image of 250x250 wich minor dimension will touch the viewport (touch-from-inside crop)
@Html.ImageHandlerMVC("~/Images/photo_2.jpg", ProcessType: ProcessTypes.Crop, Width: 250)

// The viewport is not square, but the rules remains the same. In this case we'll tell to the helper to align the exceeding vertical dimension to show the bottom of the original image
@Html.ImageHandlerMVC("~/Images/photo_2.jpg", ProcessType: ProcessTypes.Crop, Width: 350, Height: 250, VerticalAlign: VerticalAligns.Bottom)

// This time exceeds in width. We'll align the horizontally to the left
@Html.ImageHandlerMVC("~/Images/photo_2.jpg", ProcessType: ProcessTypes.Crop, Width: 50, Height: 250, HorizontalAlign: HorizontalAligns.Left)

// to the center
@Html.ImageHandlerMVC("~/Images/photo_2.jpg", ProcessType: ProcessTypes.Crop, Width: 50, Height: 250, HorizontalAlign: HorizontalAligns.Center)

// and to the right
@Html.ImageHandlerMVC("~/Images/photo_2.jpg", ProcessType: ProcessTypes.Crop, Width: 50, Height: 250, HorizontalAlign: HorizontalAligns.Right)

GrayScale

Would you want to see this cat on grayscale? No problem, no pain. This time without resizing.

// Just transform the image into grayscale. Of course this effect could be used with the other transformations
@Html.ImageHandlerMVC("~/Images/cats_1.jpg", ImageEffect: ImageEffects.GrayScale)

Flipping

You can also flip the image in both dimensions.

// Flip the image horizontally
@Html.ImageHandlerMVC("~/Images/cats_1.jpg", Width: 200, FlipType: FlipTypes.FlipHorizontal)

// Flip the image vertically
@Html.ImageHandlerMVC("~/Images/cats_1.jpg", Width: 200, FlipType: FlipTypes.FlipVertical)

// Flip the image in both directions
@Html.ImageHandlerMVC("~/Images/cats_1.jpg", Width: 200, FlipType: FlipTypes.FlipBoth)

Rotation

Or you can rotate it.

@Html.ImageHandlerMVC("~/Images/cats_1.jpg", Width: 200, ProcessType: ProcessTypes.Crop, Rotate: RotationSteps.Rotate90)
@Html.ImageHandlerMVC("~/Images/cats_1.jpg", Width: 200, ProcessType: ProcessTypes.Crop, Rotate: RotationSteps.Rotate180)
@Html.ImageHandlerMVC("~/Images/cats_1.jpg", Width: 200, ProcessType: ProcessTypes.Crop, Rotate: RotationSteps.Rotate270)

Round corners

You can apply on-the-fly rounded corners, and the image will be served as transparent png.

// Create round corners on the image, 10 pixel of radius
@Html.ImageHandlerMVC("~/Images/photo_bw.jpg", Height: 260, CornerRadius: 10)

// Using a trivial trick (radius = height / 2 = width / 2) let's create a circular image
@Html.ImageHandlerMVC("~/Images/photo_2.jpg", Width: 260, Height: 260, CornerRadius: 130, ProcessType: ProcessTypes.Crop, VerticalAlign: VerticalAligns.Bottom)

Watermark

You want to apply your own watermark on the image? Of course you can, and it's simple.

// You can apply another image as watermark upon your original image, specifying where you want to place it
@Html.ImageHandlerMVC("~/Images/ImageHandler.jpg", WatermarkPosition: WatermarkPosition.bottom_right, WatermarkUrl: "~/Images/recoding.png", CornerRadius: 10)

Watermark on an image, using caching and url encription

Maybe you want to apply the watermark and make unachievable the original no-watermarked image, to prevent someone to steal it. Just request to the helper to apply the encryption of the urls.

// If you want to make your original image unachievable, you can encrypt both image urls (image and watermark)
// the original image url will be no more visibile in your markup, substituted by an encrypted string
@Html.ImageHandlerMVC("~/Images/photo_bw.jpg", Width: 400, Height: 260, EncryptUrls: true, EnableCaching: true,
                   WatermarkPosition: Recoding.Graphics.WatermarkPosition.top_right , WatermarkUrl: "~/Images/flag_bw.png",
                   ProcessType: Recoding.Graphics.ProcessTypes.Crop, HorizontalAlign: HorizontalAligns.Left, CornerRadius: 20)

// Will be write in yor html as:
<img title="" alt="" src="imghandler.ashx?enc=KGNnhi%2bO%2fElHd8TDrczQ3ZJmER5m7ewAC%2fAv31EMoXH2GVaurAAl%2f0G5Ogw%2bvUhT4zZi5fpK6tssLbyVbyq8KC4pk6OudtbTRlrRPhXfNgEsAgjNWT9e6Va2xlQ0nwE9J2wxuwUAjbI8MxscbqwcKkgSHQP4M6%2fm4XowzefS%2bFLaZcIgZj2GpsSaJMOuxAOISWGzRTOROL7q8f0ruwRvbynhRD9UIWFIV7UoXiNDUo7wLLKqpHTnJlcQgrNQR%2f%2bpm8%2br0FxrIR7Xqtc28IGvyFerCANQcj2nMvnVFiMDNeJ0V92DygRcKDKBG1%2fW00FSsnJ1xHzohIQAHzR4EXMBSF6StBDLA4POKeyz27KXwogY3KFRclXwQUQn0cQBOyuu2nl3wg7pE9ANSSDe7suDpP3sSgxO3kO3fU7KThPpfgI%3d">

What else?

From the release 2.0, ImageHandler has been built in separated projects. The core of all is an assembly called Recoding.Graphics, that contains the extension methods used by the handler to do all the transformations, and you can use it in any kind of project, web or not (is a simple .NET 3.5 class library).

So you can directly use these methods in a fluent way to apply these transformation on images, for example, uploaded by your users.

With the code below I'll take an image on the server, scale it to 200 pixel of width, apply rounded corners by 10 pixel of radius, then save the result in a new targetFile (with .png extension, 'cause of the round corners):

// This could be an image uploaded by your users, that you want manipulate programmatically
string uploadedFile = "~/public/imageraw.jpg";

// This is the relative path of the resulting image
string targetFile = "~/public/processed.png";

BitmapImage OriginalImage = new BitmapImage(new Uri(Server.MapPath(uploadedFile)));

OriginalImage.Scale(200, 0)
             .Round(10)
             .SaveAs(Server.MapPath(targetFile));

Or I could convert it to grayscale, flip horizontally and crop in a square:

OriginalImage.GrayScale()
             .FlipHorizontal()
             .Crop(200, 200, HorizontalAligns.Center, VerticalAligns.Middle)
             .SaveAs(Server.MapPath(targetFile));

Drammatically simple. Of course you can apply all the transformation seen before.