---
title: "Applying Watermarks via HTML5/Flash Uploader"
canonical: https://www.aurigma.com/docs/us8/applying-watermarks-iuf.htm
product: "Upload Suite 8"
---
# Applying Watermarks via HTML5/Flash Uploader
Supported technologies: 
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 ThumbnailWatermark[ThumbnailWatermark (ASP.NET)](https://www.aurigma.com/docs/us8/FH_P_Aurigma_ImageUploaderFlash_Converter_ThumbnailWatermark.htm.md)[ThumbnailWatermark (PHP)](https://www.aurigma.com/docs/us8/FH_P_P_Converter_ThumbnailWatermark.htm.md)[thumbnailWatermark (JavaScript)](https://www.aurigma.com/docs/us8/FH_P_J_$au_converter_thumbnailWatermark.htm.md) 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:
```aspx-cs
``` ```csharp
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";
}
``` ```
$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;
``` ```
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'}]
});
```
## 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:
```aspx-cs
``` ```
$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;
``` ```
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'}]
});
```
## Watermarking Original Images
In order to add a watermark to images without resizing them:
1. Create a **Thumbnail** converter.
2. Set the Converter.ThumbnailFitMode[ThumbnailFitMode (ASP.NET)](https://www.aurigma.com/docs/us8/FH_P_Aurigma_ImageUploaderFlash_Converter_ThumbnailFitMode.htm.md)[ThumbnailFitMode (PHP)](https://www.aurigma.com/docs/us8/FH_P_P_Converter_ThumbnailFitMode.htm.md)[thumbnailFitMode (JavaScript)](https://www.aurigma.com/docs/us8/FH_P_J_$au_converter_thumbnailFitMode.htm.md) 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:
```aspx-cs
``` ```
$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;
``` ```
var u = $au.imageUploaderFlash({
id: 'Uploader1',
converters: [{mode: '*.*=Thumbnail',
thumbnailFitMode: 'ActualSize',
thumbnailWatermark: 'ImageUrl=watermark.png;Width=190;Height=60;Opacity=60;OffsetY=20'}]
});
```
## See Also
### Reference
- Converter Class[Converter (ASP.NET)](https://www.aurigma.com/docs/us8/FH_T_Aurigma_ImageUploaderFlash_Converter.htm.md)[Converter (PHP)](https://www.aurigma.com/docs/us8/FH_T_P_Converter.htm.md)[converter (JavaScript)](https://www.aurigma.com/docs/us8/FH_T_J_$au_converter.htm.md)
- ThumbnailWatermark Property[ThumbnailWatermark (ASP.NET)](https://www.aurigma.com/docs/us8/FH_P_Aurigma_ImageUploaderFlash_Converter_ThumbnailWatermark.htm.md)[ThumbnailWatermark (PHP)](https://www.aurigma.com/docs/us8/FH_P_P_Converter_ThumbnailWatermark.htm.md)[thumbnailWatermark (JavaScript)](https://www.aurigma.com/docs/us8/FH_P_J_$au_converter_thumbnailWatermark.htm.md)
- ImageUploaderFlash Class[ImageUploaderFlash (ASP.NET)](https://www.aurigma.com/docs/us8/FH_T_Aurigma_ImageUploaderFlash_ImageUploaderFlash.htm.md)[ImageUploaderFlash (PHP)](https://www.aurigma.com/docs/us8/FH_T_P_ImageUploaderFlash.htm.md)[imageUploaderFlash (JavaScript)](https://www.aurigma.com/docs/us8/FH_T_J_$au_imageUploaderFlash.htm.md)
### Manual
- [Uploading Images](https://www.aurigma.com/docs/us8/uploading-images-iuf.htm.md)
- [Resizing and Recompressing via HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/iuf-resizing-and-recompressing.htm.md)
- [Working with EXIF and IPTC Metadata in HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/working-with-exif-and-iptc-metadata-iuf.htm.md)
- [Rotating and Cropping Images in HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/rotating-and-cropping-iuf.htm.md)