Applying Watermarks via HTML5/Flash Uploader

Supported technologies: Adobe Flash

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

This topic consists of the following sections:

The general settings section 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 graphic 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:

Tiled specifies whether you want to draw a watermark as a single item (text or logo) or tile it across the photo.
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.
BackgroundColor specifies a background color. It has the following syntax: 0xrrggbb RGB value.
BackgroundMarginWidth and BackgroundMarginHeight set width and height of a margin outside of a watermark filled with a background (in pixels). Especially useful with Tiled watermarks to control the density of tiles.
Opacity specifies watermark opacity percentage, 0 means total transparency, 100 states that a watermark is opaque.
Angle specifies an angle you want to rotate watermarks. Mostly useful for Tiled watermarks.
When specifies whether you want to apply watermark BeforeResize or AfterResize. To get more predictable results, it is recommended to specify AfterResize.

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.

Note, Flash uploader supports less features, e.g. it ignores angle and tiled mode. If you want to support old browsers, remember to take it into consideration!

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 following syntax: 0xrrggbb RGB value. Default value is an empty string, so do not forget to specify font color, otherwise a watermark is invisible.

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

ASP.NET

<aur:ImageUploaderFlash ID="Uploader1" runat="server" >
    <Converters>
        <aur:Converter Mode="*.*=Thumbnail" 
           ThumbnailFitMode="Fit" ThumbnailWidth="320" ThumbnailHeight="240" />
    </Converters>
</aur:ImageUploaderFlash>

protected void Page_Load(object sender, EventArgs e)
{
    Uploader1.Converters[0].ThumbnailWatermark = "Text=" + DateTime.Now.ToString() + ";Size=20;" +
    "Style=Bold;FillColor=0x00ff00;Opacity=60;Position=BottomRight;OffsetY=5;OffsetX=5;" +
    "BackgroundColor=0xA6CAF0;BackgroundMarginWidth=5";
}

PHP

$uploader = new ImageUploaderFlash("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=0x00ff00;Opacity=60;Position=BottomRight;OffsetY=5;OffsetX=5;" .
    "BackgroundColor=0xA6CAF0;BackgroundMarginWidth=5");
$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.imageUploaderFlash({
    id: 'Uploader1',
    converters: [{mode: '*.*=Thumbnail', 
        thumbnailWidth: 320, 
        thumbnailHeight: 240, 
        thumbnailFitMode: 'Fit',
        thumbnailWatermark: 'Text=' + currDateString + ';Size=20;Style=Bold;' +
        'FillColor=0x00ff00;Opacity=60;Position=BottomRight;OffsetY=5;OffsetX=5;' +
        'BackgroundColor=0xA6CAF0;BackgroundMarginWidth=5'}]
});

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 Flash 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:ImageUploaderFlash 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:ImageUploaderFlash>

PHP

$uploader = new ImageUploaderFlash("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.imageUploaderFlash({
    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:

Create a Thumbnail converter.
Set the Converter.ThumbnailFitModeThumbnailFitMode (ASP.NET)ThumbnailFitMode (PHP)thumbnailFitMode (JavaScript) to ActualSize.
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:ImageUploaderFlash 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:ImageUploaderFlash>

PHP

$uploader = new ImageUploaderFlash("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.imageUploaderFlash({
    id: 'Uploader1',
    converters: [{mode: '*.*=Thumbnail', 
        thumbnailFitMode: 'ActualSize',
        thumbnailWatermark: 'ImageUrl=watermark.png;Width=190;Height=60;Opacity=60;OffsetY=20'}]
});

Applying Watermarks via HTML5/Flash Uploader

General Settings

Text Watermarks

Graphic Watermarks

Watermarking Original Images

See Also

Reference

Manual