array of images

[fabulousduck]

is it possible to hand the encoder multiple local images and convert them to a gif ?

thx

[heikkipora]

@fabulousduck Could you please elaborate what you mean with "multiple local images" ? Also, is this question still relevant to you?

[fabulousduck]

It isn't relevant to me, but maybe it is to others, so i will elaborate.

Currently if i want to make a gif of multiple images, i would need to map over an array and add each frame individually. wouldn't it be much nicer to just have a function called encoder.addFrames(['img1.jpg','img2.jpg']) instead of

    return Promise.map(base64Images, function addFrameToEncoder(base64Image){
        return encoder.addFrame(gif, base64Image,ctx,width,height)
    })

?

[yasso1am]

const generateGif = (imagePathsArray) => {
    const encoder = new GIFEncoder(195, 180);
    const canvas = createCanvas(195, 180);
    const ctx = canvas.getContext('2d');
    const img = new CanvasImage();
        img.onload = () => ctx.drawImage(img, 0, 0)
        img.onerror = err => { throw err }
        encoder.createReadStream().pipe(fs.createWriteStream('myanimated.gif'))
        encoder.start();
        encoder.setRepeat(0);
        encoder.setDelay(500);
        encoder.setQuality(10);
            for (let path of imagePathsArray ) {
                try {
                    img.src = `${path}.png`
                    encoder.addFrame(ctx)
                    if (path === imagePathsArray[imagePathsArray.length - 1 ]) {
                        encoder.finish()
                    }
                } catch (err) {
                    if (err) {
                        console.log(err)
                        return
                    }
                }
            }
}

This is what I'm doing to generate GIFs from an array of image paths.