Applying Watermarks
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 Image 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 image watermarks.
- The text watermarks section tells about text-specific watermark settings and gives an example of adding text watermark to an image.
- The image watermarks section describes image-specific watermark settings and gives an example of adding image watermark to an image.
- The watermarking original images section contains an example of applying watermark to an original image.
General Settings
To apply a watermark to user-selected images you should add a Thumbnail converter
and specify its ThumbnailWatermark property. This property accepts a string containing a
semicolon-separated list of watermark settings: variable1=value1;variable2=value2;.... Now, let us describe parameters
that are common for image and text watermarks:
- Position specifies watermark position relative to the watermarking image.
- OffsetX sets horizontal offset (in pixels) of the watermark relatively to the position it is anchored to.
- OffsetY sets vertical offset (in pixels) of the watermark relatively the position it is anchored to.
- Opacity specifies watermark opacity percentage,
0means total transparency,100states that the watermark is opaque.
Watermark parameters are case insensitive and can be specified in any order.
If you set both text and image watermarks, take into consideration that the text is always drawn over the image watermark and the positions of the text and image watermarks are calculated separately.
Text Watermarks
This section tells about text watermarks. The most common text watermark is 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 text of watermark.
- Font specifies font name. This font should be installed on the client machine.
- Size specifies font size (in pixels).
- Style specifies 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 font color. It has the same syntax as all Image 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 the text watermark:
- BackgroundColor specifies color of the background (HTML-style #rrggbb RGB value).
- BackgroundMarginWidth and BackgroundMarginHeight set width and height of additional space outside of the watermark filled with background (in pixels).
- OutlineColor specifies color of outline (HTML-style #rrggbb RGB value).
- OutlineWidth sets width of outline (in pixels).
The following example demonstartes how to add text watermark, containing current system date and time, to uploading images:
<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'}]
});
Image Watermarks
Usually a logo is used as an image watermark, however, it could 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 image watermarks:
- ImageUrl specifies URL to the image that will be used as the watermark. You may specify either absolute or relative path.
- Width sets width of the image that will be used as the watermark (in pixels).
- Height sets height of the image that will be used as the watermark (in pixels).
Applying watermarks is quite easy, however, you should remember some aspects of this process:
- You can use any images supported by Image Uploader as watermarks.
- If the image watermarks are resized, they can only be downsized (if needed).
The following example adds watermark.png picture as a watermark to uploading images:
<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 watermark original images you should:
- Create a Thumbnail converter.
- Set the Converter.ThumbnailFitMode to ActualSize.
- Configure text or image watermark for this converter as it is described in the sections above.
The following example shows how to add image 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'}]
});