Decorator Design Pattern: ASP.NET Dynamic Image Resize and Water Mark without losing Image Quality

In web applications, one of the common requirements is Dynamic Image re-size (i.e. Thumbnail, original size etc) with out losing image quality and also some times watermarking copy write messages etc.

When we think to model an object to meet this requirement, Decorator Design pattern fits perfect. The definition of the decorator design pattern is Attach additional responsibilities to an object dynamically.

Think in this aspect,

1. Object returns photo [image]

2. Decorate the object [image] with different sizes [Small, Medium, Large, Full size, Portrait etc.]

3. Decorate the object [image] with copy write messages

4. Decorate the object [image] with colored borders

5. Decorate the object [image] with rounded corner

And the requirement goes….

Here each decoration is additional responsibility. Rather than creating a single Class files to meet the above requirement, model using Decorator Design Pattern. To understand the concepts of Decorator design Pattern follow http://www.dofactory.com/Patterns/PatternDecorator.aspx and have a look at the structural code.

This post is accompanied with the full running sample of the above application with Design pattern approach [Decorator design pattern] and ordinary approach.

The intent of this post is to provide a fully running sample using Decorator design pattern to help fellow programmers to get a head start on design patterns. For the purpose of this sample I used and tweaked the image re-size source code comes along with ASP.Net Personal web site starter kit and Watermark source code from code project article.

A key implementation point in the Decorator pattern is that decorators both inherit the original class, in this case public abstract class PhotoDecorator : Photo contain an instantiation of it
this.oPhoto =oPhoto;

/// <summary>
/// Decorator
///
</summary>
public
abstract class PhotoDecorator : Photo
{
protected Photo oPhoto;

public PhotoDecorator(Photo oPhoto){this.oPhoto = oPhoto; }
public override Image GetPhoto(){return oPhoto.GetPhoto(); }

}

Note:

Before dive in to the running application, understand the Decorator design pattern from do factory site and execute the supporting structural code and then download the asp.net web application given as zip file. I included all the classes [component, interfaces, decorator] in one single class file called Photo.cs under App_Code/decorator. I created the class files in analogous to the do factory structural code.

The client is an asp.net http handler called from .aspx page i.e

<img src=”decorator.ashx?file=sunset.jpg&Size=S&wMark=www.senthilsweb.com” alt=”decorator”/>

download sample application

5 thoughts on “Decorator Design Pattern: ASP.NET Dynamic Image Resize and Water Mark without losing Image Quality

  1. your code is great and save me lots of time to do the job. but i have some problem with the code here: if the url like someUrl.com\thumbsnail.aspx then the code works perfectly. but when someUrl.com\products\thumbsnail.aspx the code doesn’t show the images. Any suggestion? Thanks!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s