This documentation is for the old version. Go to the latest Upload Suite docs

Adding Watermarks

A watermark is a text or an image which is printed upon the image, and provides a simple means of adding useful information like date and time or the name of the image author or some logo. With Image Uploader you can easily add watermarks to thumbnails of images you upload, and each of the thumbnails can have its own watermark.

Specifying Watermarks

There are two ways to add watermarks: using the initialization parameter or setting the corresponding property of Image Uploader object itself in runtime. The following example demonstrates how to use both approaches to put a logo on all the first and second thumbnails. Note that the overlaying image is drawn semi-transparent. Here is the logo:

A watermark to be drawn.

And here is the code:

JavaScript

<script type="text/javascript" src="iuembed.js">  </script>
<script type="text/javascript">
function ImageUploader_BeforeUpload() {
	getImageUploader("ImageUploader").setUploadThumbnail2Watermark("ImageUrl=" +
		"http://localhost/Watermark.png;ImageWidth=229;ImageHeight=60;" +
		"Position=TopRight;Opacity=50");
}

var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

//...Any other params or event handlers...

iu.addParam("UploadThumbnail1FitMode", "Fit");
iu.addParam("UploadThumbnail2FitMode", "Fit");

iu.addParam("UploadThumbnail1Watermark",
	"ImageUrl=http://localhost/Watermark.png;ImageWidth=229;ImageHeight=60;" +
	"Position=TopRight;Opacity=50");
iu.addEventListener("BeforeUpload", "ImageUploader_BeforeUpload");

//...Any other params or event handlers...

iu.writeHtml();
</script>

If both thumbnails have the size of 320 x 240 pixels, we will get the following result:

A watermark on a thumbnail.

As you see, the UploadThumbnail1Watermark and UploadThumbnail2Watermark properties specify a watermark as a string, which consists of several parameters separated by semicolons. The order and case of parameters are ignored.

In our example, the following parameters are used:

ImageUrl - sets the logo.
Position - sets the logo position (in our case, the top right corner of the image).
ImageWidth and ImageHeight - set the logo size (in pixels).
Opacity - sets the opacity of the logo.

There are other parameters, and their descriptions may be found in the reference.

You may also add watermarks to specific thumbnails using the UploadThumbnailWatermark property.

Note

Remember that by default Image Uploader provides only three thumbnails for each image. If you need more thumbnails, use the UploadThumbnailAdd() method.

As you may see, applying watermarks is rather easy. However, you should remember some things about this process:

You can use as watermarks images in any format supported by Image Uploader.
The image watermarks are resized in the same manner as thumbnails, that is they can only be downsized (if it is needed).
You may specify opacity for both text and image watermarks.
You may specify a background color for both text and image watermarks. For the image watermarks it will be used, if the image contains transparency.
When both text and image watermarks are specified, the text is always drawn over the image watermark.
Position of the text and image watermarks is calculated separately.