Gif image watermarking

[yupeng2015]

Can you tell me how to operate the existing GIF image watermarking to support each frame watermarking?

[timdrake]

Be sure to install, and import from the gifshot-watermarks package and not the plain ol' gifshot package. After you do this you may import, and use as per usual:

import gifshot from "gifshot";

// Helper function
function dataURItoBlob(dataURI) {
  // convert base64/URLEncoded data component to raw binary data held in a string
  var byteString;
  if (dataURI.split(",")[0].indexOf("base64") >= 0) {
    byteString = atob(dataURI.split(",")[1]);
  } else {
    byteString = unescape(dataURI.split(",")[1]);
  }
  // separate out the mime component
  var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
  // write the bytes of the string to a typed array
  var ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], { type: mimeString });
}

const someWaterMarkImage = document.createElement("img");
someWaterMarkImage.crossOrigin = "Anonymous";
someWaterMarkImage.src = "https://yourdomain.com/path/to/watermark.png";

const someImageOnPage = document.getElementById("some-image-on-page");

const gifshotOptions = {
  gifWidth: 400,
  gifHeight: 400,
  video: ["https://yourdomain.com/path/to/video.mp4"],
  numFrames: 30,
  waterMark: someWaterMarkImage,
  waterMarkHeight: 400,
  waterMarkWidth: 400,
  waterMarkXCoordinate: 0,
  waterMarkYCoordinate: 0,
};

gifshot.createGIF(gifshotOptions, (obj) => {
  if (!obj.error) {
    someImageOnPage.src = URL.createObjectURL(dataURItoBlob(obj.image));
  }
});