Watermarking Images in a Java Servlet

In our previous tutorial, we showed how to create dynamic images images in a servlet. In this tutorial, we are going to take it a step further by dynamically adding a text watermark to an image as it is requested.

Setting up the Servlet
In the web.xml, you will need to configure a filter that will be used to call the servlet. By creating a filter, this will simplify the url used to access the servlet and image. To an end user, the filter will look like part of the directory structure for the image.

The servlet will be invoked when the url contains the pattern /watermark/*. In our example, we will place the images in a directory called photos in the web application directory. To view the image without the watermark, you would use the url http://webserver/webapp/photos/car.jpg. To invoke the servlet, you would use the url http://webserver/webapp/watermark/photos/car.jpg.

view plaincopy to clipboardprint?

1. <servlet>
2. <servlet-name>com.codebeach.servlet.WatermarkServletservlet-name>
3. <servlet-class>com.codebeach.servlet.WatermarkServletservlet-class>
4. servlet>
6. <servlet-mapping>
7. <servlet-name>com.codebeach.servlet.WatermarkServletservlet-name>
8. <url-pattern>/watermark/*url-pattern>
9. servlet-mapping>

    com.codebeach.servlet.WatermarkServlet

    com.codebeach.servlet.WatermarkServlet







    com.codebeach.servlet.WatermarkServlet

    /watermark/*

Getting the File Name
When the servlet is invoked, the first thing we need to do is to know which file is being requested to have a watermark added.

view plaincopy to clipboardprint?

1. File file = new File(req.getPathTranslated());
2. if (!file.exists())
3. {
4. res.sendError(res.SC_NOT_FOUND);
5. return;
6. }

File file = new File(req.getPathTranslated());

if (!file.exists())

{

  res.sendError(res.SC_NOT_FOUND);

  return;

}

The getPathTranslated() method of the HttpServletRequest object provides the file name with the that was specified on the url after the watermark filter. If the requested file does not exist, this will return a not found error.

Creating the AlphaComposite
To allow us to see through the watermark, we will create an AlphaComposite. For our example, we will use a value of 50%. Since we are only drawing text in our tutorial for the watermark, we could have easily created a Color object where the alpha level was 50%. AlphaComposite allows more flexibility since it can be used when you draw anything on top of the the source image. So if you want to use your logo as a watermark, the code for blending it with the source image will be the same.

view plaincopy to clipboardprint?

1. //Create an alpha composite of 50%
2. AlphaComposite alpha = AlphaComposite.getInstanceAlphaComposite.SRC_OVER,0.5f);
3. g2d.setComposite(alpha);

//Create an alpha composite of 50%

AlphaComposite alpha = AlphaComposite.getInstanceAlphaComposite.SRC_OVER,0.5f);

g2d.setComposite(alpha);

Drawing the Watermark
Since we have set the AlphaComposite, we now need to draw the text on the source image. For this example, we will set the color to white, enable text anti-aliasing, and a font of Arial Bold 30 point. There are a number of ways you could draw the watermark on the image. For this example, we will simply center the text by determining the sizes of the image and rectangle of the rendered string.

view plaincopy to clipboardprint?

1. g2d.setColor(Color.white);
2. g2d.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING,
3. RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
5. g2d.setFont(new Font("Arial", Font.BOLD, 30));
7. String watermark = "Copyright © 2008";
9. FontMetrics fontMetrics = g2d.getFontMetrics();
10. Rectangle2D rect = fontMetrics.getStringBounds(watermark, g2d);
12. int centerX = (photo.getIconWidth() - (int) rect.getWidth()) / 2;
13. int centerY = (photo.getIconHeight() - (int) rect.getHeight()) / 2;
14. g2d.drawString(watermark, centerX, centerY);
16. //Free graphic resources
17. g2d.dispose();

g2d.setColor(Color.white);

g2d.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING,

                    RenderingHints.VALUE_TEXT_ANTIALIAS_ON);



g2d.setFont(new Font("Arial", Font.BOLD, 30));



String watermark = "Copyright © 2008";



FontMetrics fontMetrics = g2d.getFontMetrics();

Rectangle2D rect = fontMetrics.getStringBounds(watermark, g2d);



int centerX = (photo.getIconWidth() - (int) rect.getWidth()) / 2;

int centerY = (photo.getIconHeight() - (int) rect.getHeight()) / 2;

g2d.drawString(watermark, centerX, centerY);



//Free graphic resources

g2d.dispose();

Creating a JPG
The final step is to write the image to the response output stream as a jpg. To do this, we will use the ImageIO class that was introduced with Java 1.4. The ImageIO class allows you to write an Image object to JPG, PNG, BMP, and WBMP. In Java 1.6, you will be able to write an Image as GIF.

view plaincopy to clipboardprint?

1. //Set the mime type of the image
2. res.setContentType("image/jpg");
4. //Write the image as a jpg
5. OutputStream out = res.getOutputStream();
6. ImageIO.write(bufferedImage, "jpg", out);
7. out.close();

//Set the mime type of the image

res.setContentType("image/jpg");



//Write the image as a jpg

OutputStream out = res.getOutputStream();

ImageIO.write(bufferedImage, "jpg", out);

out.close();

The ImageIO class will write the bufferedImage as a jpg to the output stream from the HttpServletResponse object.

The Results
To access the image, you can place the servlet call in an tag or directly from the URL.

Original Image
Watermarked Image


Watermarked Image