Gif 위젯 : "텍스트 워터마크"

템플릿에는 gif.com.ai에서 도구 모음 앱을 만드는 데 필요한 모든 것이 포함되어 있습니다.


텍스트 워터마크 위젯은 gif의 오른쪽 모서리에 반영구적인 워터마크를 생성합니다. 이 위젯을 도구 모음에 고정하고 필요에 따라 활성화할 수 있습니다. "Text Watermark" 위젯에 대한 템플릿도 이 게시물 하단에 포함되어 있습니다.



위젯 분해:

워터마크 라이브러리는 실제 워터마크를 gif에 추가합니다. 위젯은 사용자가 일부 텍스트를 입력할 수 있도록 모달을 실행합니다.



사용자가 입력한 텍스트에 기반한 워터마크가 캔버스에 삽입됩니다...




두 부분으로 나뉩니다.

1) JS 컨텍스트

자체 실행 익명 함수는 대화 상자 모달을 시작하여 텍스트를 입력합니다. canvas:resize 이벤트를 수신하는 이벤트 리스너가 생성되므로 캔버스 크기를 조정할 때마다 레이블 방향을 다시 지정할 수 있습니다.

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

실제 워터마크 생성 및 배치는 함수 호출을 통해 수행됩니다. 이 함수는 텍스트가 상자에 입력된 후와 캔버스 크기가 조정될 때마다 두 곳에서 호출됩니다.

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) 설정 컨텍스트

값이 mode인 pin 속성은 이 항목이 도구 모음에 속해 있음을 gif 웹탑에 알려줍니다. 마찬가지로 thumbnail 속성은 도구 모음에서 위젯의 아이콘을 설정합니다.

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

아래의 "텍스트 워터마크"위젯 템플릿을 확인하세요.

템플릿 열기