Applying Watermarks via ActiveX/Java Uploader

A watermark is a text or an image printed upon an image selected for upload, which provides a simple means of adding useful information like date, time, an image author name, or a logo. With ActiveX/Java Uploader you can easily add watermarks to images before they are uploaded. Here you can use a text or an image as a watermark, specify a watermark position and opacity, and set some other watermark parameters.

This topic consists of the following sections:

  • The general settingssection shows how to turn watermarking on and describes parameters related to both text and graphic watermarks.
  • The text watermarks section tells about text-specific watermark settings and gives an example of adding a text watermark to an image.
  • The image watermarks section describes image-specific watermark settings and gives an example of adding a graphic watermark to an image.
  • The watermarking original images section contains an example of applying a watermark to an original image selected for upload without resizing it.

General Settings

To apply a watermark to user-selected images you should add a Thumbnail converter and specify its ThumbnailWatermarkThumbnailWatermark (ASP.NET)ThumbnailWatermark (PHP)thumbnailWatermark (JavaScript) property. This property accepts a string containing a semicolon-separated list of watermark settings: variable1=value1;variable2=value2;... Now, let us describe parameters which are common for graphic and text watermarks:

  • Position specifies watermark position relatively to an image being watermarked.
  • OffsetX sets a horizontal offset (in pixels) of a watermark relatively to a position it is anchored to.
  • OffsetY sets a vertical offset (in pixels) of a watermark relatively a position it is anchored to.
  • Opacity specifies watermark opacity percentage, 0 means total transparency, 100 states that a watermark is opaque.
Note

Watermark parameters are case insensitive and can be specified in any order.

If you set up both text and graphic watermarks, take into consideration that a text is always drawn above a graphic watermark.

Text Watermarks

This section tells about text watermarks. The most common text watermark is a date stamp. Other types of text watermarks are an image author name, a brief comment, and etc. You can use all the general settings with text watermarks and following text-specific properties:

  • Text specifies a watermark text.
  • Font specifies a font name. This font should be installed on the client machine.
  • Size specifies a font size (in pixels).
  • Style specifies a font style. The following styles are supported: Bold, Italic, Underlined. To get multi-style text specify several styles separating them by a comma, for example, "Style=Bold,Italic" gives bold and italic at the same time.
  • FillColor specifies a font color. It has the same syntax as all ActiveX/Java Uploader color properties (HTML-style #rrggbb RGB value). Default value is an empty string, which allows to create only outlined text without inner fill.

You also can specify background and outline of a text watermark:

  • BackgroundColor specifies a background color (HTML-style #rrggbb RGB value).
  • BackgroundMarginWidth and BackgroundMarginHeight set width and height of a margin outside of a watermark filled with a background (in pixels).
  • OutlineColor specifies an outline color (HTML-style #rrggbb RGB value).
  • OutlineWidth sets an outline width (in pixels).

The following example demonstartes how to add the text watermark, containing current system date and time, to images being uploaded:

ASP.NET
<aur:Uploader ID="Uploader1" runat="server" >
    <Converters>
        <aur:Converter Mode="*.*=Thumbnail" 
           ThumbnailFitMode="Fit" ThumbnailWidth="320" ThumbnailHeight="240" />
    </Converters>
</aur:Uploader>
C#
protected void Page_Load(object sender, EventArgs e)
{
    Uploader1.Converters[0].ThumbnailWatermark = "Text=" + DateTime.Now.ToString() + ";Size=20;" +
    "Style=Bold;FillColor=#00ff00;Opacity=60;Position=BottomRight;OffsetY=5;OffsetX=5;" +
    "BackgroundColor=#a6caf0;BackgroundMarginWidth=5;OutlineColor=#000080;OutlineWidth=1";
}
PHP
$uploader = new Uploader("Uploader1");
$converters = &$uploader->getConverters();
$converter = new Converter();
$converter->setMode("*.*=Thumbnail");
$converter->setThumbnailFitMode("Fit");
$converter->setThumbnailWidth(320);
$converter->setThumbnailHeight(240);
$converter->setThumbnailWatermark("Text=" . date("m.d.Y H:i:s") . ";Size=20;Style=Bold;" .
    "FillColor=#00ff00;Opacity=60;Position=BottomRight;OffsetY=5;OffsetX=5;" .
    "BackgroundColor=#a6caf0;BackgroundMarginWidth=5;OutlineColor=#000080;OutlineWidth=1");
$converters[] = $converter;
JavaScript
var currDate = new Date();
var currDateString = (currDate.getMonth()+1) + '.' + currDate.getDate() + '.' + currDate.getFullYear() + 
    ' ' + currDate.getHours() + ':' + currDate.getMinutes() + ':' + currDate.getSeconds();
var u = $au.uploader({
    id: 'Uploader1',
    converters: [{mode: '*.*=Thumbnail', 
        thumbnailWidth: 320, 
        thumbnailHeight: 240, 
        thumbnailFitMode: 'Fit',
        thumbnailWatermark: 'Text=' + currDateString + ';Size=20;Style=Bold;' +
        'FillColor=#00ff00;Opacity=60;Position=BottomRight;OffsetY=5;OffsetX=5;' +
        'BackgroundColor=#a6caf0;BackgroundMarginWidth=5;OutlineColor=#000080;OutlineWidth=1'}]
});

An image after applying text watermark.

Graphic Watermarks

Usually a logo is used as a graphic watermark, however, it can be any picture. You can use all the general settings with image watermarks, but you have to specify the following three parameters, which are required for graphics watermarks:

  • ImageUrl specifies an image URL that will be used as a watermark. You may specify either absolute or relative path.
  • Width sets a watermark image width (in pixels).
  • Height sets a watermark image height (in pixels).

Applying watermarks is quite easy, however, you should remember some aspects of this process:

  • You can use any image supported by ActiveX/Java Uploader as a watermark.
  • If a graphic watermark is resized, it can only be downsized (if needed).

The following example adds watermark.png picture as a watermark to images before the upload process starts:

ASP.NET
<aur:Uploader ID="Uploader1" runat="server" >
    <Converters>
        <aur:Converter Mode="*.*=Thumbnail" 
           ThumbnailFitMode="Fit" ThumbnailWidth="320" ThumbnailHeight="240"
           ThumbnailWatermark="ImageUrl=watermark.png;Width=190;Height=60;Opacity=60;OffsetY=20" />
    </Converters>
</aur:Uploader>
PHP
$uploader = new Uploader("Uploader1");
$converters = &$uploader->getConverters();
$converter = new Converter();
$converter->setMode("*.*=Thumbnail");
$converter->setThumbnailFitMode("Fit");
$converter->setThumbnailWidth(320);
$converter->setThumbnailHeight(240);
$converter->setThumbnailWatermark("ImageUrl=watermark.png;" .
    "Width=190;Height=60;Opacity=60;OffsetY=20");
$converters[] = $converter;
JavaScript
var u = $au.uploader({
    id: 'Uploader1',
    converters: [{mode: '*.*=Thumbnail', 
        thumbnailWidth: 320, 
        thumbnailHeight: 240, 
        thumbnailFitMode: 'Fit',
        thumbnailWatermark: 'ImageUrl=watermark.png;Width=190;Height=60;Opacity=60;OffsetY=20'}]
});

A watermark.

A watermarked image.

Watermarking Original Images

In order to add a watermark to images without resizing them:

  1. Create a Thumbnail converter.
  2. Set the Converter.ThumbnailFitModeThumbnailFitMode (ASP.NET)ThumbnailFitMode (PHP)thumbnailFitMode (JavaScript) to ActualSize.
  3. Configure text or graphic watermark in this converter as it was described in the sections above.

The following example shows how to add a graphic watermark to original images:

ASP.NET
<aur:Uploader ID="Uploader1" runat="server" >
    <Converters>
        <aur:Converter Mode="*.*=Thumbnail" 
            ThumbnailFitMode="ActualSize"
            ThumbnailWatermark="ImageUrl=watermark.png;Width=190;Height=60;Opacity=60;OffsetY=20" />
    </Converters>
</aur:Uploader>
PHP
$uploader = new Uploader("Uploader1");
$converters = &$uploader->getConverters();
$converter = new Converter();
$converter->setMode("*.*=Thumbnail");
$converter->setThumbnailFitMode("ActualSize");
$converter->setThumbnailWatermark("ImageUrl=watermark.png;" .
    "Width=190;Height=60;Opacity=60;OffsetY=20");
$converters[] = $converter;
JavaScript
var u = $au.uploader({
    id: 'Uploader1',
    converters: [{mode: '*.*=Thumbnail', 
        thumbnailFitMode: 'ActualSize',
        thumbnailWatermark: 'ImageUrl=watermark.png;Width=190;Height=60;Opacity=60;OffsetY=20'}]
});

See Also

Reference

Manual