Gif Widget : "Text Watermark"

#template #tool #gif #javascript

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.

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

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)
          });
      }
})();

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');
    });
}

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"
}