Seeking assistance with utilizing the impressive libgif.js library.
The goal is to overlay an animated gif on top of a png text image with a transparent background, allowing the resulting image to be copied to the clipboard.
- Achieved success in merging a static image as a template
- Encountered issues when attempting this with a gif - the gif freezes when merged with the text image
Used the libgif.js library to create an animated canvas from a gif successfully, but encountered difficulty displaying the text image on the final canvas.
Any insights into why the textImage appears to be properly sized and positioned on the canvas but not displayed in the end result?
Also, curious about the quick initial completion of the progress bar followed by slower progress - any explanations for this behavior?
JS code snippet from the JSFiddle:
function doit() {
var isGIF = true;
var previewContainer = document.getElementById("previewContainer");
var textImage = document.getElementById("textImage");
var templateImage = document.getElementById("templateImage");
var w = document.getElementById("templateImage").width;
var h = document.getElementById("templateImage").height;
previewContainer.removeChild(previewContainer.children[1]);
if (isGIF) {
var gif = new SuperGif({
gif: templateImage,
progressbar_height: 5,
auto_play: true,
loop_mode: true,
draw_while_loading: true
});
gif.load();
var canvas = gif.get_canvas();
var context = canvas.getContext('2d');
context.drawImage(textImage, 0, 0, w, h);
previewContainer.replaceChild(canvas, previewContainer.children[0]);
}
}
Note: based on Arend's solution from this question on this JSFiddle.