4 min read
Watermarking Images On The Fly Using ASP.NET
Watermarking and general image manipulation within the .NET Framework has become quite an easy thing to carry out thanks to the features provided by the System.Drawing namespace. The System.Drawing namespace contains types to help you with…well…drawing and rendering images. I will not be covering the basic use of the System.Drawing class. But feel free to carry out a Google.
My example consists of using a .NET (aspx) page and a Generic Handler (ashx). The .NET page will allow me to select an image, add a logo to the top left and some text. The Generic Handler will contain all the magic needed to manipulate the image based on selections made within the .NET page. The screenshot (below) shows my basic program in action.
Firstly, let me start off by showing you the code for the Generic Handler.
ImageRenderJpeg.ashx
using System;
using System.Web;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
public class ImageRenderJpeg : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "image/jpeg";
//Retrieve image details
string imageUrl = context.Request.QueryString["ImageUrl"].ToString();
string imageComment = context.Request.QueryString["ImageComment"].ToString();
string imageIconUrl = context.Request.QueryString["Icon"].ToString();
if (!String.IsNullOrEmpty(imageUrl))
{
//Get the location of the image
Image imagePhoto = Image.FromFile(imageUrl);
// Get dimensions of image
int imageHeight = imagePhoto.Height;
int imageWidth = imagePhoto.Width;
//Create a new Bitmap
Bitmap oBitmap = new Bitmap(imageWidth, imageHeight, PixelFormat.Format24bppRgb);
//Load Background Graphic from Image
Graphics oGraphics = Graphics.FromImage(oBitmap);
oGraphics.SmoothingMode = SmoothingMode.HighQuality;
oGraphics.DrawImage(imagePhoto, new Rectangle(0, 0, imageWidth, imageHeight), 0, 0, imageWidth, imageHeight, GraphicsUnit.Pixel);
//Layer 1: Add an Image Logo to the top left
if (!String.IsNullOrEmpty(imageIconUrl))
{
Image imageIcon = Image.FromFile(imageIconUrl);
oGraphics.DrawImage(imageIcon, new Rectangle(5, 5, 124, 48), 0, 0, imageIcon.Width, imageIcon.Height, GraphicsUnit.Pixel);
imageIcon.Dispose();
}
//Layer 2: Add Comment
if (!String.IsNullOrEmpty(imageComment))
{
Font commentFont = new Font("Arial", 14, FontStyle.Regular); //Font Style
StringFormat commentFormat = new StringFormat();
commentFormat.Alignment = StringAlignment.Near; //Align text in left of layer
SolidBrush commentBrush = new SolidBrush(Color.Black); //Font Colour
oGraphics.FillRectangle(Brushes.Beige, 5, imageHeight - 55, imageWidth - 15, 50); //Create a rectangle with white background
oGraphics.DrawString(imageComment, commentFont, commentBrush, new Rectangle(5, imageHeight - 55, imageWidth - 15, 50), commentFormat); //Add comment text inside rectangle
}
//Layer 3: Add Copyright watermark
Font watermarkFont = new Font("Arial", 40, FontStyle.Bold); //Font Style
SolidBrush semiTransBrush = new SolidBrush(Color.LightGray); //Font Colour
StringFormat watermarkFormat = new StringFormat();
watermarkFormat.Alignment = StringAlignment.Center; //Align text in center of image
oGraphics.DrawString("Copyright",
watermarkFont,
semiTransBrush,
new PointF(imageWidth / 2, imageHeight / 2), watermarkFormat);
//Dispose of graphic objects
imagePhoto.Dispose();
oGraphics.Dispose();
//Output image
oBitmap.Save(context.Response.OutputStream, ImageFormat.Jpeg);
}
else
{
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
You can see that I am manipulating my image based on the query string parameters I pass from my .NET page into my Generic Handler. Hopefully, my code is commented well enough to explain the general overview on what is going on.
The following code displays how my aspx page parses all the parameters needed to generate an image on the page:
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Image Generator</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Select an Image:
<asp:DropDownList ID="ddlImage" runat="server">
<asp:ListItem Text="*" Value="*">Select Image</asp:ListItem>
<asp:ListItem Text="The Tumbler" Value="C:\Users\Surinder\Documents\Visual Studio 2010\WebSites\ImageCreator\Images\batmobile_Tumbler.jpg"></asp:ListItem>
<asp:ListItem Text="Audi TT" Value="C:\Users\Surinder\Documents\Visual Studio 2010\WebSites\ImageCreator\Images\new-audi-tt-coupe.jpg"></asp:ListItem>
<asp:ListItem Text="Volvo Concept" Value="C:\Users\Surinder\Documents\Visual Studio 2010\WebSites\ImageCreator\Images\volvo-s60-concept-interior1.jpg"></asp:ListItem>
</asp:DropDownList>
<br />
<br />
Add Logo: <asp:TextBox ID="txtImage" runat="server"></asp:TextBox>
<br />
<br />
Add a comment:
<asp:TextBox ID="txtComment" runat="server" TextMode="MultiLine" Width="500" Height="50"></asp:TextBox>
<br />
<br />
<asp:Button ID="btnCreateImage" Text="Create Image" runat="server" onclick="btnCreateImage_Click" />
<br />
<br />
<img id="imgRender" alt="Image Render" title="Image Render" runat="server" />
</div>
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (ddlImage.SelectedValue == "*")
{
imgRender.Visible = false;
}
else
{
imgRender.Visible = true;
}
}
protected void btnCreateImage_Click(object sender, EventArgs e)
{
if (ddlImage.SelectedValue != "*")
{
//The Image source will be pointed to our Generic Handler to display the image.
imgRender.Src = String.Format("ImageRenderJpeg.ashx?ImageUrl={0}&ImageComment={1}&Icon={2}", ddlImage.SelectedValue, txtComment.Text, txtImage.Text);
}
}
}
I have a HTC Hero which was recently upgraded from Android 1.5 to 2.1 a few months back. It has definitely been a significant and worthwhile upgrade packing in lots of new extra features and most importantly extra applications to download from the Android Market.
