do you have an example of using the watermark?

[l0c0luke]

I have tried pointing to a file, pointing to base64, sending a new Image() but nothing seems to be working.

[lorikay4]

Implementation doesn't work for me. code times out over and over.

[tpettrov]

Same situation here, code times out, there is no error in the callback.

[shuhikari]

Same here

[chrisneal]

This seems to be fixed now. It's working for me on master branch.

[Pie-Jie]

Still does not work here, keeps on loading.

[Pie-Jie]

Nvm, got it working. You need put in a new Image variable, I was inserting path to the image.

[markjanenriquez]

Water mark not working even using new Image variable, can someone help me?

[JayneYan98]

watermark not working，no mater what i user base64， image path and new Image()

[lorikay4]

Yes, that's my understanding as well.

On Fri, May 10, 2019 at 3:38 AM Jayne [email protected] wrote:

watermark not working，no mater what i user base64， image path and new Image()

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/yahoo/gifshot/issues/117#issuecomment-491190935, or mute the thread https://github.com/notifications/unsubscribe-auth/ABCIEO5UQRLIBOLUTP5HCU3PUURAJANCNFSM4FGX3J2Q .

-- ==+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+==

== Lori K. Brown == web developer == 703-887-2636

==+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+==

[dspdog]

i got it working by adding the watermark PNG as an img element on the page (hidden with css) then using an Image element in the code with the same src. this "preloads" the image i guess. it's a hack but abs nothing else worked.

[lorikay4]

Am doing something like that myself as well.

Thanks for the note.

Lori

On Thu, Nov 21, 2019 at 10:00 AM dspdog [email protected] wrote:

i got it working by adding the watermark PNG as an img element on the page (hidden with css) then using an Image element in the code with the same src. this "preloads" the image i guess. it's a hack but abs nothing else worked.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/yahoo/gifshot/issues/117?email_source=notifications&email_token=ABCIEO26Z5TTT5WJE44LGGTQU2PAZA5CNFSM4FGX3J22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEE2QLAQ#issuecomment-557122946, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABCIEO45F6FBC6MTSKFG3OTQU2PAZANCNFSM4FGX3J2Q .

-- ==+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+==

== Lori K. Brown == web developer == 703-887-2636

==+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+==

[dspdog]

i noticed my solution does not work in safari. works only in chrome.

[wobsoriano]

any updated on this?

[Hannanparvez]

This worked for me.

let watermark=document.createElement('img'); watermark.src='./logo.svg' gifshot.createGIF({ 'images':['...','....'] , 'interval': 0.3, 'gifWidth': 1280, 'gifHeight': 720, 'waterMarkHeight': 50, 'waterMark':watermark, 'waterMarkWidth': 100,

}

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