Click here to Skip to main content
15,867,594 members
Articles / Web Development / ASP.NET

Program for Watermarking an Image

Rate me:
Please Sign up or sign in to vote.
3.94/5 (23 votes)
31 Mar 2010CPOL3 min read 65.7K   3.5K   76   8
To uniquely identify the images from our storage, we watermark them with some text (usually company / portal name)
ImageWatermarking

Introduction

In todays' websites, we often need to save images from users whether to create personal galleries or product galleries, etc. To uniquely identify the images from our storage, we watermark them with some text (usually company / portal name). This article describes how to watermark an image automatically when the user uploads that or before showing that on the page.

Using the Code

Here in the demo program, I’m using two folders in the root directory; one is to save the original image and the next is to save the watermarked image. Once the user uploads an image, that has been saved in the original image folder before watermarking and then in the watermarked image folder. It should be noted here that in actual websites, we don’t save original images only processed images have been saved. Because this program is to demonstrate this feature, I’m saving both images in separate folders and linking them with two different Image controls on page.

C#
// Inclusion of these two namespaces is required for such program to work

using System.IO;
using System.Drawing;

The first one is used to access ‘Path’ class through which we extract the extension of uploaded image. Next is required to use other image processing related classes like ‘Bitmap’, ‘Graphics’, ‘StringFormat’ etc.

C#
// The handler function of the button clicking which the image 
// has been processed for watermarking is given below

protected void btnResults_OnClick(object sender, EventArgs e)
{
   if (Page.IsValid && fpImage.HasFile)
   {
      string tmpName = Guid.NewGuid().ToString();
      fpImage.SaveAs(MapPath("~/Original Images/" + tmpName + 
			Path.GetExtension(fpImage.FileName)));
      imgOriginal.ImageUrl = "~/Original Images/" + tmpName + 
			Path.GetExtension(fpImage.FileName);

      Bitmap original_image = new Bitmap(fpImage.FileContent);
      waterMarkImage(original_image, tmpName);
      if(original_image != null) original_image.Dispose();
   }
}

I create a new GUID and collect it in a string variable tmpName. This is the name to save original as well as watermarked image. The next line is to save the original image to ‘Original Images’ folder. This saved image is then linked to an Image control on page.

Now the image is collected in a new Bitmap and this bitmap and tmpName are passed to a new function which is responsible for watermarking this image. This function is as under:

C#
protected void waterMarkImage(Bitmap imgBmp, string tmpName)
{
  string sWaterMark = "Cherisys Technologies";
  int fontsize = ((imgBmp.Width * 2) / (sWaterMark.Length * 3));
  int x = imgBmp.Width / 2;
  int y = imgBmp.Height * 9 / 10;

  StringFormat drawFormat = new StringFormat();
  drawFormat.Alignment = StringAlignment.Center;
  drawFormat.FormatFlags = StringFormatFlags.NoWrap;

  //drawing string on Image
  Graphics graphic = Graphics.FromImage(imgBmp);
  graphic.DrawString(sWaterMark, new Font("Verdana",fontsize,FontStyle.Bold), 
	new SolidBrush(Color.FromArgb(80, 255, 255, 255)), x, y, drawFormat);

  imgBmp.Save(MapPath("~/Watermarked Images/" + tmpName + 
			Path.GetExtension(fpImage.FileName)));
  imgResult.ImageUrl = "~/WaterMarked Images/" + tmpName + 
			Path.GetExtension(fpImage.FileName);
        
  if (graphic != null) graphic.Dispose();
}

The first few lines of the above function are used to specify the text to watermark, font size (emSize) of the text and the position of the text on image (x and y coordinates of top left corner of text). You can adjust all these according to your needs.

Now I created an object of StringFormat class, that is ‘drawFormat’. An object of Graphics class, ‘graphic’ has now been created and our original image has been plotted over it. This time using DrawString function of graphic object watermarking text is imposed over image.

Here I created a new Font, you can pass font name as “Verdana” (my case), or any other font name. Font size has been collected from variable fontsize and the style can be given as Regular, Bold, Underline, Italic or Strikeout.

Here I created a new SolidBrush and a color formed using arguments has been passed in it. This is the color of watermark text, you can adjust it as you need. The simple trick is to increase the value of first argument (that is 80) for making the text more opaque on image and decrease the same value for making it more transparent.

Now I got the image watermarked and saved it to Watermarked Images folder. Simultaneously, I assigned this resultant image to an Image control on page.

Points to Ponder

The practical stuff is attached as a demo. You will easily understand when you look at the download files. Image processing operations require high amount of server resources. If not managed properly, they can slow down the performance. It is important to release resources by disposing the objects of classes like Bitmap and Graphics when you're done.

You might also be interested in the following articles that I have written:

Final Words

I hope you’ll find the stuff helpful. Thanks for reading. Good luck!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead Cherisys Technologies
India India
Senior Software Professional with 13+ years of experience in web/desktop applications development.

Comments and Discussions

 
Questionhelp Pin
elham 23-Jun-13 19:59
elham 23-Jun-13 19:59 
GeneralMy vote of 3 Pin
shareque4-Sep-12 20:32
shareque4-Sep-12 20:32 
General[My vote of 2] Comments Pin
mattraffel6-Apr-10 2:57
mattraffel6-Apr-10 2:57 
GeneralLot about image processing Pin
pamperghost3-Apr-10 2:04
pamperghost3-Apr-10 2:04 
GeneralRe: Lot about image processing Pin
Mohd Arshad Malik3-Apr-10 4:26
Mohd Arshad Malik3-Apr-10 4:26 
GeneralMy vote of 1 Pin
TringXRay29-Mar-10 22:02
TringXRay29-Mar-10 22:02 
GeneralRe: My vote of 1 PinPopular
Mohd Arshad Malik31-Mar-10 2:27
Mohd Arshad Malik31-Mar-10 2:27 
GeneralRe: My vote of 1 Pin
Mohammad Elsheimy31-Mar-10 11:23
Mohammad Elsheimy31-Mar-10 11:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.