Gif Widget : "Text Watermark"
Tags: template, tool, gif, javascript
Published: 2022-08-16 04:41:57


---
title: Gif Widget : "Text Watermark"
published: true
description: A batteries included starter kit to create a toolbar app in gif.com.ai.
tags: template, tool, gif, js
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dhvbtu12n7cfuyugoht.png
# Use a ratio of 100:42 for best results.
---

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynq3w469zaqvj71szv80.PNG">
  <figcaption>The template includes everything you need to create a  toolbar app in [gif.com.ai](https://gif.com.ai)</figcaption>
</figure>

The **Text Watermark** widget creates a semi permanent watermark on the right corner of your gif. You can pin this widget onto your toolbar and activate it on demand. The template to the ["Text Watermark"](https://gif.com.ai?id=QmQSH3ymWyN8zUY53fsqMgo7ytVxB4Mu89DyYfA5NgAbAb) widget is also included at the bottom of this post.

____
<center>Widget Teardown:</center>
____

The watermark library adds the actual watermark to the gif. The widget just fires up a modal so the user could enter in some text.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7k69f3e6ihy7p1glx5a.PNG)

A watermark based on the text the user entered is then implanted onto the canvas...

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snwf22nenfhlapio2yuk.png)
____
<center>Comes in two parts:</center>
____

##__1) JS Context__##

A self executing anonymous function sets off the dialog modal to enter in the text. An event listener that listens to the `canvas:resize` event is created so the label can be re-oriented whenever the canvas is resized.

```javascript 

(async function(){
    const { value: text } = await Swal.fire({
        title: 'Text Watermark',
        text: 'Text you want to watermark on your gif.',
        input: 'text',
        showConfirmButton: true,
        allowOutsideClick: false,
        allowEscapeKey: false,
        inputLabel: 'Watermark',
        inputPlaceholder: 'Type your text here...',
        inputAttributes: {
          'aria-label': 'Type your text here'
        },
        showCancelButton: true
      });
      if (text) {
          genWatermark(watermark, text)
          document.addEventListener('canvas:resize', function(){
              genWatermark(watermark, text)
          });
      }
})();
```
The actual watermark generation and placement is done through a function call. This function gets called in two places, once after the text is entered into the box and every time the canvas is resized.

```javascript
function genWatermark(watermark, text){
    let wm = new Image($('#gifcanvas').width(), 
    $('#gifcanvas').height());
    $(wm).css('pointer-events', 'none');
    watermark([wm])
    .image(watermark.text.lowerRight(text, '48px Josefin Slab', '#fff', 0.5))
    .then(function (img) {
        img.id = 'watermark';
        $('#watermark').remove();
        $('#gifcanvas').prepend(img).find('#watermark').zIndex(2147483647).css('pointer-events', 'none');
    });
}
```

##__2) Settings Context__##

The `mode` property with the value of `pin` tells our gif webtop that this item belongs in the toolbar. Similarly the `thumbnail` property sets an icon for the widget in the toolbar. 

```json
{
    title: "Text Watermark",
    description: "Place a text watermark on the right corner.",
    autorun: false,
    mode: "pin",
    thumbnail: "https://i.imgur.com/lRMAZTM.png"
}
```

Check out the "Text Watermark" widget template below.

#### [Open template](https://gif.com.ai?id=QmQSH3ymWyN8zUY53fsqMgo7ytVxB4Mu89DyYfA5NgAbAb)