---
title: "converter.thumbnailWatermark Property  HTML5/Flash Uploader JavaScript"
canonical: https://www.aurigma.com/docs/us8/FH_P_J_$au_converter_thumbnailWatermark.htm
product: "Upload Suite 8"
---

# converter.thumbnailWatermark Property HTML5/Flash Uploader JavaScript

Supported technologies: ![Adobe Flash](https://www.aurigma.com/docs/us8/icons/flash.png)![HTML 5](https://www.aurigma.com/docs/us8/icons/html5.png)
 
Gets or sets a watermark of the thumbnail.

## Syntax
 
```
$au.imageUploaderFlash({
    converters : [
        {
            //...other params...
            thumbnailWatermark: "",
            //...other params...
        }
    ]
})
```

```
$au.imageUploaderFlash('uploaderID').converters().set(index).thumbnailWatermark(value);
value = $au.imageUploaderFlash('uploaderID').converters().get(index).thumbnailWatermark();
```
 
### Property Value
 
Type: **String**
 
The watermark of the thumbnail. Watermark string syntax is described in the **Remarks** section. For HTML5 uploader, you can also pass a JSON object with the same names as used for the string.
 
If an empty string is specified, watermark will not be drawn on the thumbnail.
 
Default value is **""**.

## Remarks
 
The watermark string consists of several variables separated with a semicolon:
 
`variable1=value1;variable2=value2;... `
 
The following variables are supported:
 
| Variable | Description |
| --- | --- |
| **Text** | Watermark text. If the text contains semicolon or quotation mark characters enclose it in single (`' '`) or double (`" "`) quotes. Moreover, quotation marks (both single `'` and double `"`) inside the text should be escaped with a backslash. For example, to get a *Andrew's Photos; Vacation* text, set this variable as follows:<br> <br>`Text="Andrew\'s Photos; Vacation"`<br> <br>**Note** <br>If both text and image are used as watermarks, the text will always be rendered over the image.<br> <br>Default value is an empty string.<br> <br>When the text watermark is specified, the following parameter also makes sense:<br> <ul><li><code>FillColor</code></li><li><code>Font</code></li><li><code>Size</code></li><li><code>Style</code></li><li><code>Angle</code></li><li><code>Tiled</code></li><li><code>Position</code></li><li><code>OffsetX</code></li><li><code>OffsetY</code></li><li><code>Opacity</code></li><li><code>BackgroundColor</code></li><li><code>BackgroundMarginWidth</code></li><li><code>BackgroundMarginHeight</code></li></ul> |
| **Tiled** | Boolean value specifying whether you want to draw a single line at the specified position (`false`) or tile this string across the entire image (`true`). In the latter case, you can control the distance between each watermark item using the `BackgroundMarginWidth` and `BackgroundMarginHeight`.<br> <br>Default value is `false`. Ignored by Flash uploader. |
| **Angle** | A number specifying the rotation angle for the watermark.<br> <br>Default value is `0`. Ignored by Flash uploader. |
| **When** | A string specifying when to apply the watermark operation - before it resizes the image or after. Possible values are: `AfterResize` or `BeforeResize`.<br> <br>Default value is `BeforeResize`. Ignored by Flash uploader. |
| **FillColor** | Font color. It has the following syntax: `0xrrggbb` RGB value.<br> <br>Default value is an empty string (the fill is transparent). |
| **Font** | Font name. This font should be installed on the client machine. That is why it is highly recommended to use some generic font like `Arial`, `Verdana`, etc.<br> <br>Default value is `Arial`. |
| **Size** | Font size (in pixels).<br> <br>Default value is `12`. |
| **Style** | Font style. The following styles are supported:<br> <ul><li><strong>Bold</strong></li><li><em>Italic</em></li><li><u>Underlined</u></li></ul> <br>You can specify several styles separated with a comma. Example:<br> <br>`Style=Bold,Italic`<br> <br>Default value is an empty string (regular font is used). |
| **ImageUrl** | Url to an image that will be used as the watermark. For HTML5 uploader, it may be an inline image (using the data:URL).<br> <br>**Note** <br>If both text and image are used as watermarks, the text will always be rendered over the image.<br> <br>Default value is an empty string.<br> <br>When the image watermark is specified, the following parameter also makes sense:<br> <ul><li><code>Width</code></li><li><code>Height</code></li><li><code>Position</code></li><li><code>OffsetX</code></li><li><code>OffsetY</code></li><li><code>Opacity</code></li></ul> |
| **Width** | Width of the image that will be used as the watermark. The image will be resized to the specified dimensions as an ordinary thumbnail, that is, the image can only be downsized, and its proportions are kept.<br> <br>Default value is an empty string (actual image width is used). |
| **Height** | Height of the image that will be used as the watermark. The image will be resized to the specified dimensions as an ordinary thumbnail, i.e. the image can only be downsized and its proportions are kept.<br> <br>Default value is an empty string (actual image height is used). |
| **Position** | Watermark position. It can take one of the following values:<br> <ul><li><strong>TopLeft</strong> - watermark will be drawn in the top left corner of an image.</li><li><strong>TopCenter</strong> - watermark will be drawn in the center of the top of an image.</li><li><strong>TopRight</strong> - watermark will be drawn in the right top corner of an image.</li><li><strong>CenterLeft</strong> - watermark will be drawn in the center of the left edge of an image.</li><li><strong>Center</strong> - watermark will be drawn in the center of an image.</li><li><strong>CenterRight</strong> - watermark will be drawn in the center of the right edge of an image.</li><li><strong>BottomLeft</strong> - watermark will be drawn in the bottom left corner of an image.</li><li><strong>BottomCenter</strong> - watermark will be drawn in the center of the bottom of an image.</li><li><strong>BottomRight</strong> - watermark will be drawn in the bottom right corner of an image.</li></ul> <br>Default value is `BottomRight`. |
| **OffsetX** | Horizontal offset (in pixels) of the watermark relative to the position it is anchored to (according to the `Position` variable).<br> <br>**Note** <br>If horizontal position is *left* or *center*, coordinates direction is left-to-right. If it is *right*, coordinates direction is flipped to right-to-left.<br> <br>Default value is `0` (no offset). |
| **OffsetY** | Vertical offset (in pixels) of the watermark relative to the position it is anchored to (according to the `Position` variable).<br> <br>**Note** <br>If vertical position is *top* or *center*, coordinates direction is top-to-bottom. If it is *bottom*, coordinates direction is flipped to bottom-to-top.<br> <br>Default value is `0` (no offset). |
| **Opacity** | Watermark opacity percentage. If `0`, the watermark is totally transparent. If `100`, the watermark is opaque. Values between `0` and `100` will produce watermark with various level of transparency.<br> <br>This value works for all elements of watermark. There is no way to configure different opacity for background, text outline and text fill.<br> <br>Default value is `100`. |
| **BackgroundColor** | Background color. It has the following syntax: `0xrrggbb` RGB value.<br> <br>Default value is an empty string (the background is transparent). |
| **BackgroundMarginWidth** | Width of additional space outside of the watermark filled with background (in pixels).<br> <br>Default value is `0`. |
| **BackgroundMarginHeight** | Height of additional space outside of the watermark filled with background (in pixels).<br> <br>Default value is `0`. |
 
**Note** 
The watermark string is case insensitive.
 
Though you can set both image and text watermarks at the same time, it makes sense to use only one of them. For text watermarks the only required variable is `Text`. Here is an example of watermark string which will draw green semi-transparent italic text *Aurigma* in the bottom left corner of an image:
 ```
var u = $au.imageUploaderFlash({
    id: 'Uploader1',
    converters: [{mode: '*.*=Thumbnail',thumbnailWatermark: 'Text=Aurigma;Opacity=75;FillColor=0x00ff00;Position=BottomLeft;Style=Italic;Size=30'}]
});
``` 
For image watermarks `ImageUrl`, `Width`, and `Height` are required. Here is an example of semi-transparent logo drawn in the top tight corner of the image:
 ```
var u = $au.imageUploaderFlash({
    id: 'Uploader1',
    converters: [{mode: '*.*=Thumbnail',thumbnailWatermark: 'ImageUrl=http://localhost/watermark.png;Width=86;Height=63;Position=TopRight;Opacity=50'}]
});
``` 
Alternatively, you can use the JSON object instead of a string:
 ```
var u = $au.imageUploaderFlash({
    id: 'Uploader1',
    converters: [{mode: '*.*=Thumbnail',thumbnailWatermark: {	ImageUrl: 'http://localhost/watermark.png',	Width: 86,	Height: 63,	Tiled: true,	When: 'AfterResize',	Opacity: 50}
});
``` 
However this syntax is not compatible with Flash uploader. If you want to use the object with Flash, the simplest way is to convert it to the string using the jQuery's `$.param` as follows:
 ```
		var a = 45; // Angle	var watermarkObj = { Text: 'Aurigma', Angle: a};	var watermarkString = decodeURIComponent($.param(wsettings)).replace(/&/g, ";");	// ... pass this string to the thumbnailWatermark property.
``` 
This property makes sense only if the [mode](https://www.aurigma.com/docs/us8/FH_P_J_$au_converter_mode.htm.md) property has the `Thumbnail` value.

## See Also
 
### Reference
 
- [getThumbnailWatermarkPreview(Object) Method](https://www.aurigma.com/docs/us8/FH_M_J_$au_converter_getThumbnailWatermarkPreview_1_8419e710.htm.md)
- [Aurigma.ImageUploaderFlash.Converter.ThumbnailWatermark ASP.NET Property HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/FH_P_Aurigma_ImageUploaderFlash_Converter_ThumbnailWatermark.htm.md)
- [Converter.ThumbnailWatermark PHP Property HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/FH_P_P_Converter_ThumbnailWatermark.htm.md)

### Manual
 
- [Applying Watermarks via HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/applying-watermarks-iuf.htm.md)