Add a watermark to a screenshot with JavaScript

JavaScript API

GrabzIt enables developers to easily add watermarks to their screenshots. To do this you can upload your own watermarks and then pass the watermark id to the JavaScript API.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
    {"customwatermarkid": "MyWatermark"}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
    {"customwatermarkid": "MyWatermark"}).Create();
</script>

Special Watermarks

Alternatively you can use one of GrabzIt's special built in watermarks as shown below. These special watermarks include watermarks for adding timestamps, text, counters and browser windows to captures.

Timestamp Watermark

To generate a timestamp watermark just pass the GrabzIt_Timestamp identifier as shown below.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"customwatermarkid": "GrabzIt_Timestamp_UTC+0_Top_Left"}).Create();

GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"customwatermarkid": "GrabzIt_Timestamp_UTC+10_Bottom_Right"}).Create();

GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"customwatermarkid": "GrabzIt_Timestamp_UTC-5_Middle_Center"}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"customwatermarkid": "GrabzIt_Timestamp_UTC+0_Top_Left"}).Create();

GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"customwatermarkid": "GrabzIt_Timestamp_UTC+10_Bottom_Right"}).Create();

GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"customwatermarkid": "GrabzIt_Timestamp_UTC-5_Middle_Center"}).Create();
</script>

Text Watermark

The text watermark is generated using the GrabzIt_Text identifier as shown in the below example.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"customwatermarkid": "GrabzIt_Text_My text_Top_Left"}).Create();

GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"customwatermarkid": "GrabzIt_Text_My website description!_Bottom_Right"}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", 
{"customwatermarkid": "GrabzIt_Text_My text_Top_Left"}).Create();

GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", 
{"customwatermarkid": "GrabzIt_Text_My website description!_Bottom_Right"}).Create();
</script>

Browser Watermark

The browser watermark is the simplest of all the watermarks and can be generated using the GrabzIt_Browser identifier as shown below.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"customwatermarkid": "GrabzIt_Browser"}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"customwatermarkid": "GrabzIt_Browser"}).Create();
</script>