Export Dom Node To Gif With Gif-encoder And Dom-to-image Libs

I am desperately trying to get a non-animated gif export from a DOM Node, on client-side, but without any success yet. I use for that the lib dom-to-image which, thanks to it's met

Solution 1:

So the creator of gif-encoder lib found the solution, and here it is below. If I may quote him :

Our library outputs the GIF as data, not as an DOM element or similar. To aggregate this content, you can collect the stream into a buffer or pass it along to its target

So the proper code for this is finally :

import domtoimage from'dom-to-image';
import concat from'concat-stream';
importGifEncoderfrom'gif-encoder';
importJSZipfrom'jszip';

constpixelsToGIF = (pixels, width, height) =>
  newPromise((resolve, reject) => {
    const gif = newGifEncoder(width, height);
    gif.pipe(concat(resolve));
    gif.writeHeader();
    gif.addFrame(pixels);
    gif.finish();
    gif.on('error', reject);
  })

const zip = newJSZip();
domtoimage
.toPixelData(DOMNode, { width, height })
.then(pixels =>pixelsToGIF(pixels, 'image.gif', width, height))
.then(gif => zip.file('image.gif', gif))
.catch(e =>console.log('couldn\'t export to GIF', e));