使用 gif 编码器和 dom-to-image 库将 DOM 节点导出为 GIF

Question

我拼命地试图从客户端的 DOM 节点获取非动画 gif 导出，但尚未取得任何成功。

我为此使用了 lib dom-to-image，这要归功于它的方法toPixelData，返回一些像素。 然后我希望这些像素给我一个 gif。我为此使用了听起来很棒的 lib gif 编码器。 我想过为此使用Promise，因为最后一步是将此gif放在JSZip创建的ZIP文件中。

这是下面的代码。考虑到我已经将 DOM 节点作为输入，具有预定义的height和width。一切都进展顺利，直到我需要将GifEncoder实例转换为 blob 才能下载它。

import domtoimage from 'dom-to-image';
import GifEncoder from 'gif-encoder';
const fs = require('localstorage-fs');
const toBlob = require('stream-to-blob');
import JSZip from 'jszip';
const pixelsToGIF = (pixels, width, height) =>
new Promise((resolve, reject) => {
const gif = new GifEncoder(width, height);
const gifFile = fs.createWriteStream('image.gif');
gif.pipe(gifFile);
gif.writeHeader();
gif.addFrame(pixels);
gif.finish();
gif.on('data', function() {
console.log(this); //GIFEncoder, a constructor function which extends readable-stream@~1.1.9 (cf doc.)
toBlob(this, function (err, blob) {
console.error(err) // No error
console.log(blob) // Blob of size 0
resolve(blob)
})
})
gif.on('error', reject)
})
const zip = new JSZip();
domtoimage
.toPixelData(DOMNode, { width, height })
.then(pixels => pixelsToGIF(pixels, 'image.gif', width, height))
.then(gif => { 
console.log(gif); // Blob of size 0
zip.file('image.gif', gif)
})
.catch(e => console.log('couldn't export to GIF', e));

我也尝试使用gif.on('end', function () {} )而不是 gif.on('data'(，但除了属性readable对于事件datatrue，false为事件end，结果是相同的：大小为 0 的 Blob。 错误在哪里？

Answer 1

因此，gif-encoderlib 的创建者找到了解决方案，下面是它。如果我可以引用他的话：

我们的库将 GIF 输出为数据，而不是 DOM 元素或类似元素。若要聚合此内容，可以将流收集到缓冲区中或将其传递到目标

所以正确的代码最后是：

import domtoimage from 'dom-to-image';
import concat from 'concat-stream';
import GifEncoder from 'gif-encoder';
import JSZip from 'jszip';
const pixelsToGIF = (pixels, width, height) =>
new Promise((resolve, reject) => {
const gif = new GifEncoder(width, height);
gif.pipe(concat(resolve));
gif.writeHeader();
gif.addFrame(pixels);
gif.finish();
gif.on('error', reject);
})
const zip = new JSZip();
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));