I am working on a project involving a series of squares that can be filled with different colors and saved in the background as PNG format. The goal is to have these colored squares play as a preview when a user clicks next.
I'm currently facing an issue where the provided JS code does not seem to play a gif. I would appreciate any assistance in solving this problem.
function saveSquaresAsPng() {
// Retrieving all square elements
const squares = document.querySelectorAll(".square");
// Iterating through squares to save them as PNGs
for (let i = 0; i < squares.length; i++) {
const square = squares[i];
html2canvas(square).then(canvas => {
// Converting canvas to PNG data URL
const pngDataUrl = canvas.toDataURL("image/png");
// Creating a link to download the PNG file
const link = document.createElement("a");
link.download = `square-${i + 1}.png`;
link.href = `"./images/square-" + (i + 1) + ".png"`;
link.click();
});
}
}
function createGif() {
// Retrieving all saved PNGs and adding them to the gif
const gif = new GIF({
workers: 2,
quality: 10,
width: 300,
height: 300
});
for (let i = 1; i <= 3; i++) {
const img = new Image();
img.src = `"./images/square-" + i + ".png"`;
gif.addFrame(img);
}
// Rendering the GIF and setting it as the source of the <img> tag
gif.on('finished', function(blob) {
const imgTag = document.getElementById("myGif");
imgTag.src = URL.createObjectURL(blob);
});
// Rendering frames into an animated GIF
gif.render();
console.log(gif);
}
The objective is to successfully save the squares and play them as a gif.