使用gif-encoder和dom-to-image库将DOM节点导出到GIF [英] export DOM Node to GIF with gif-encoder and dom-to-image libs

问题描述

我正拼命尝试从客户端的DOM节点获取非动画gif导出，但仍未成功.

I am desperately trying to get a non-animated gif export from a DOM Node, on client-side, but without any success yet.

我为此使用了 dom-to-image 这个库，它是方法toPixelData，返回一些像素. 然后我要这些像素给我一个gif.为此，我使用了 gif-encoder 听起来不错. 我考虑过为此使用Promise，因为最后一步是将gif放在 JSZip .

I use for that the lib dom-to-image which, thanks to it's method toPixelData, return some pixels. Then I want these pixels to give me a gif. I use for this the lib gif-encoder which sounds great. I thought about using a Promise for that because the last step is to put this gif in a ZIP file created by JSZip.

这是下面的代码.考虑到我已经将DOM节点作为输入，并带有预定义的height和width.一切都进行得很顺利，直到需要下载GifEncoder实例到blob以便下载它的步骤为止.

Here is the code below. Consider that I already have the DOM Node as an input, with predefined height and width. Everything is going pretty well, until the step where I need to convert my GifEncoder instance to a blob, in order to download it.

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除外，该属性对于事件data是true，对于事件false是false c9>，结果相同:大小为0的Blob. 错误在哪里?

I also tried to use gif.on('end', function () {} ) instead of gif.on('data'), but except for the property readable which is true for the event data, and false for the event end, the result is the same: Blob of size 0. Where is the mistake ?

推荐答案

因此，gif-encoder lib的创建者

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

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

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';
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));

这篇关于使用gif-encoder和dom-to-image库将DOM节点导出到GIF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！