DEV Community

Cover image for Gif Widget : "Text Watermark"

Posted on • Updated on

Gif Widget : "Text Watermark"

The template includes everything you need to create a toolbar app in

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{
        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(), 
    $(wm).css('pointer-events', 'none');
    .image(watermark.text.lowerRight(text, '48px Josefin Slab', '#fff', 0.5))
    .then(function (img) { = 'watermark';
        $('#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: ""
Enter fullscreen mode Exit fullscreen mode

Check out the "Text Watermark" widget template below.

Open template

Top comments (1)

erhartjamie profile image

excessive concepts you have shared its really impressive and unique . Kali mantra to punish enemies