Open PC-Four opened 6 years ago
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.
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?