result is a 4kb black image
moeinrahimi opened this issue · comments
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>
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.
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
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.
that's ok it was my mistake in first place, any good library you recommend for server-side ?