Click here to Skip to main content
Click here to Skip to main content

Program for Watermarking an Image

, 31 Mar 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
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.

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

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)

Share

About the Author

Mohd Arshad (Sam)
Software Developer (Senior) Cherisys Technologies, WebStreet.in
India India

Software professional with demonstrated strength in windows-based and web-based software development. Have 4 years of experience with the full software development lifecycle including requirements, design, development, testing/QA, deployment, training & support. Have 1 year experience managing groups, planning and executing implementations. Practical working knowledge of all aspects of IT. Possess strong insight into practical business considerations.



www.cherisys.com
www.webstreet.in
www.codevdo.com
www.bizkut.com
Follow on   Twitter

Comments and Discussions

 
Questionhelp Pinmemberelham 23-Jun-13 20:59 
GeneralMy vote of 3 Pinmembershareque4-Sep-12 21:32 
General[My vote of 2] Comments Pinmembermattraffel6-Apr-10 3:57 
GeneralLot about image processing Pinmemberpamperghost3-Apr-10 3:04 
GeneralRe: Lot about image processing PinmemberMohd Arshad (Sam)3-Apr-10 5:26 
GeneralMy vote of 1 PinmemberTringXRay29-Mar-10 23:02 
"Visible" watermarking is not remarkable. If the article was extended to include invisible watermarking it would make for a more interesting read. This article reads like a how clever am I article rather than other articles with useful content.
GeneralRe: My vote of 1 PinmemberMohd Arshad (Sam)31-Mar-10 3:27 
GeneralRe: My vote of 1 PinmemberMohammad Elsheimy31-Mar-10 12:23 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141216.1 | Last Updated 31 Mar 2010
Article Copyright 2010 by Mohd Arshad (Sam)
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid