Tallan's Technology Blog

Tallan's Top Technologists Share Their Thoughts on Today's Technology Challenges

Watermarking Images using the Razor WebImage helper.

There’s many cases when you may want to watermark images on your website including:

  • Protecting copyrighted content
  • Showing previews of premium content
  • Identifying the origin of original content

And many more..

We’ll take a look at using the Razor WebImage helper to watermark images on your website easily and efficiently.

Adding the Microsoft.Web.Helpers Library

To add the Microsoft.Web.Helpers library, install NuGet, and install the Microsoft.Web.Helpers package.  Also, include the System.Web.Helpers package included with ASP.NET MVC 3.

Our Image Displaying Website

Our website will be a simple website that takes in a view model containing pictures to display and outputs them to a page.  We’re going to use the sample images supplied with Windows 7 for this demo.

Code Snippet
  1. public class ImageDisplayViewModel
  2.    {
  3.        public IEnumerable<string> ImageUrls;
  4.    }

 

Above is our simple display ViewModel, with a list of Image URL’s of images to display.

We’ll modify the Index action method of the HomeController supplied with the normal MVC3 project template as below.

Code Snippet
  1. public ActionResult Index()
  2.         {
  3.             return View(GetViewModel());
  4.         }
  5.         public ImageDisplayViewModel GetViewModel()
  6.         {
  7.             return new ImageDisplayViewModel()
  8.                        {
  9.                            ImageUrls = new List<string>
  10.                                           {
  11.                                               Url.Content(“~/Content/Images/Chrysanthemum.jpg”),
  12.                                               Url.Content(“~/Content/Images/Desert.jpg”),
  13.                                               Url.Content(“~/Content/Images/Hydrangeas.jpg”),
  14.                                               Url.Content(“~/Content/Images/Jellyfish.jpg”),
  15.                                               Url.Content(“~/Content/Images/Koala.jpg”),
  16.                                               Url.Content(“~/Content/Images/Lighthouse.jpg”),
  17.                                               Url.Content(“~/Content/Images/Penguins.jpg”),
  18.                                               Url.Content(“~/Content/Images/Tulips.jpg”)
  19.                                           }
  20.                        };
  21.         }

Here were returning the results of GetViewModel, which merely populates the view model with the filenames from the images we want to display.  This would likely come from a database in any real solution.

This results in the following index page:

image

Now, let see how we could protect these images using the WebImage helper to add watermarks as we display them.

Adding Watermarks with WebImage

First, we’re going to move our image tag into a partial view called Image.

Code Snippet
  1. @model System.String
  2. <img class=”displayImage” alt=”@image” src=”@image” />

 

Next, we’ll create an Action Method that will apply a watermark to our image.

 

Code Snippet
  1. [ChildActionOnly]
  2. public ActionResult Image(string imageUrl)
  3. {
  4.     var image = new WebImage(Server.MapPath(Path.Combine(“~.”, imageUrl)));
  5.     image.AddImageWatermark(Server.MapPath(“~/Content/Images/watermark.jpg”));
  6.     var newUrl = Url.Content(Path.Combine(“~/Content/Images/Protected/”, Path.GetFileName(image.FileName)));
  7.     image.Save(Server.MapPath(newUrl));
  8.     return PartialView(“Image”, newUrl);
  9. }

 

Here, we’re loading the image supplied in the URL, and adding the following watermark image below.

 

image

The AddImageWatermark function allows you to specify the size, position, and padding of your watermark.  I’m using the defaults, with our image being 150×150 pixels, displaying on the bottom right of the source image with a 5 pixel padding.

Now, we’ll need to replace our img tag in our Index page with a call to render the child action.  Our new Index.cshtml is below.

Code Snippet
  1. @model Watermarks.Models.ImageDisplayViewModel
  2. @{
  3.     ViewBag.Title = “Home Page”;
  4. }
  5. @foreach(var image in Model.ImageUrls) {
  6.     @Html.Action(“Image”, new { imageUrl = image });
  7. }

 

Now, when we execute our application, we get the following output:

image

As you can see, the watermark image has been applied to our image before being rendered to the page.

Text Watermarking

In addition to adding an image watermark, we can add a text watermark as well.  Below is a sample where we’ve replaced the image watermarking code with the text watermarking code, and show the resulting output.

 

Code Snippet
  1. [ChildActionOnly]
  2.         public ActionResult Image(string imageUrl)
  3.         {
  4.             var image = new WebImage(Server.MapPath(Path.Combine(“~.”, imageUrl)));
  5.             image.AddTextWatermark(“** DEMO ** ** DEMO ** ** DEMO ** ** DEMO ** ** DEMO **”, fontSize:30,  fontColor: “White”, horizontalAlign: “Center”, verticalAlign: “Middle”, opacity: 70);
  6.             var newUrl = Url.Content(Path.Combine(“~/Content/Images/Protected/”, Path.GetFileName(image.FileName)));
  7.             image.Save(Server.MapPath(newUrl));
  8.             return PartialView(“Image”, newUrl);
  9.         }

image

1 Comment. Leave new

Fantastic!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>