DEV Community 👩‍💻👨‍💻

Cover image for Gif Widget : "Text Watermark"
egfx
egfx

Posted on • Updated on

Gif Widget : "Text Watermark"


The template includes everything you need to create a toolbar app in gif.com.ai

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" widget is also included at the bottom of this post.


Widget Teardown:

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

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

Image description


Comes in two parts:

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.


(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)
          });
      }
})();
Enter fullscreen mode Exit fullscreen mode

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.

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');
    });
}
Enter fullscreen mode Exit fullscreen mode

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.

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

Check out the "Text Watermark" widget template below.

Open template

Top comments (0)

🤔 Did you know?

 
🎙 DEV hosts some podcasts that you can find on our Podcasts page.