jnordberg / gif.js

JavaScript GIF encoding library

Home Page:http://jnordberg.github.io/gif.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Setting constructor width & height crops image

PC-Four opened this issue · comments

commented

Whenever I set the gif constructor's "width" and "height" it crops my gif output to only that section instead of outputting the entire gif to that dimension.

Any suggestions to fix this?

You can resize the images by drawing them to canvases, or a single canvas with copy: true on addFrame

Something like this:

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 150; // whatever the desired size is
canvas.height = 100;
for(var i = 0; i < frames.length; i++) {
    var frame = frames[i];
    ctx.clearRect(0, 0, canvas.width, canvas.height); // not needed if images are guaranteed opaque
    ctx.drawImage(frame, 0, 0, canvas.width, canvas.height); // stretch image onto canvas (ignoring aspect ratio)
    gif.addFrame(frame, {delay: 100, copy: true});
}

If you want to keep the aspect ratio, just make sure the canvas.width/height are proportional to the frames' width/height you're using, or if you want it to be a different proportion to the frame images you could do some math to center it with space on the sides of the shorter dimensions.