Program for Watermarking an Image

Welcome, Guest

(1 viewing) (1) Guest

ASP.NET PROGRAMS, ASP.NET DESIGN, ASP.NET CODE, ASP.NET TOOLS

ASP.NET combines Active Server Pages with the .NET Framework. This technology allows you to create dynamic web applications. ASP.NET pages work in all browsers. Best of all, ASP.NET lets you build web pages using less code than you need with classic ASP. If you’re using ASP.NET to build some applications for your website, you owe it to yourself to check out the articles in this section.

Reply Topic

New Topic

Page:
1

TOPIC: Program for Watermarking an Image

Program for Watermarking an Image 19 Mar 2010 19:25 #315

Introduction
In websites of todays, 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 use watermarking them with some text (usually company / portal name). The article in context describes how to watermark an image automatically when the user uploads that or before showing that on page.

Using the code
Here in demo program, I’m using two folders in root directory one is to save original image and next is to save watermarked image. Once the user upload an image, that is been saved in original image folder before watermarking and then in 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 that’s why 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;

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 string variable tmpName. This is the name to save original as well as watermarked image. Next line is to save 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 to watermark this image. This function is as under:

protected void waterMarkImage(Bitmap imgBmp, string tmpName)
{
  string sWaterMark = "www.codersengine.com";
  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();
}

First few lines of 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 need.

Now I created an object of StringFormat class, that is ‘drawFormat’. An object of Graphics class, ‘graphic’ is 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 is 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 that increase the value of first argument (that is 80) for making the text more opaque on image and decrease same value for making it more transparent.

Now I got the image watermarked and saved it to Watermarked Images folder. Simultaneously assigned this resultant image to an Image control on page.
Points to Ponder
Practical stuff is attached as Demo. You will easily understand when download. Image processing operations require high amount of server resources, if not managed properly can slow down the performance. Important is to release resources by disposing the objects of classes like Bitmap and Graphics, when you're done.
This attachment is hidden for guests. Please log in or register to see it.

Attachments:

This attachment is hidden for guests. Please log in or register to see it.

Sara
OFFLINE
Administrator
Posts: 44
Karma: 9

Reply Quote

CodersEngine

Reply Topic

New Topic

Page:
1

Tutorials Forum

Web Development Tutorials

ASP.NET

Time to create page: 0.52 seconds