Applying Watermarks via ActiveX/Java Uploader

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.

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:

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

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";
}

$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;

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'}]
});

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:

<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>

$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;

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'}]
});

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:

<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>

$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;

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

• Converter ClassConverter (ASP.NET)Converter (PHP)converter (JavaScript)
• ThumbnailWatermark Property ThumbnailWatermark (ASP.NET)ThumbnailWatermark (PHP)thumbnailWatermark (JavaScript)
• Uploader ClassUploader (ASP.NET)Uploader (PHP)uploader (JavaScript)

Manual

• Uploading Images
• Resizing and Recompressing via ActiveX/Java Uploader
• Working with EXIF and IPTC Metadata in ActiveX/Java Uploader
• Rotating and Cropping via ActiveX/Java Uploader