Program for Watermarking an Image

• Download source - 73.29 KB

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.

// 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.

// 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:

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:

• Program for Format Conversion of an Image
• Program for Optimization and Resizing an Image

Final Words

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