search

jnordberg / gif.js

JavaScript GIF encoding library
http://jnordberg.github.io/gif.js/
MIT License
4.74k stars 667 forks source link

result is a 4kb black image #107

Closed moeinrahimi closed 5 years ago

moeinrahimi commented 5 years ago

ok i think i'm missing something somewhere here this is my code

<html>
  <head>
    <script src="./gif.js"></script>

  </head>
  <body>
    <img src="./MOVIEGIF20190610_230933.gif" alt="">
    <script>
      var gif = new GIF({
  workers: 1,
  quality: 10,
  debug:true,
  width:800,
  height:600,
  workerScript:'./worker.js'
});
let image = document.querySelector('img')
gif.addFrame(image);

gif.on('finished', function(blob) {
  window.open(URL.createObjectURL(blob))
});

gif.render();

      </script>
  </body>
</html>
1j01 commented 5 years ago

You need to wait for any images that you want to add as frames to load first.

The best way to ensure an image loads, and that you get the load event, is to create the image in javascript, and listen for onload before setting the src (which loads the image, and if cached might immediately trigger the load event):

var img = new Image();
img.onload = function() {
  // use img
};
img.src = "path/to/image.jpg";

If you clue me in to your overall goals I can provide further guidance.

moeinrahimi commented 5 years ago

I'm trying to use gif.js as a gif size reducer, I'm not sure if this the right use for it. can you provide an example code, I'm getting only first frame in image onload using .addFrame method

1j01 commented 5 years ago

gif.js can't parse/read gifs, and I don't think it produces very optimally small gifs, so I don't think it's the right tool for the job, sorry 😕

Do you need gif compression to be done client-side in the browser? There are lots options if you can do it server-side or at build time. I don't know of any that would be good for client-side gif compression.

moeinrahimi commented 5 years ago

that's ok it was my mistake in first place, any good library you recommend for server-side ?