Fabric.js - 保存动画快照。

Question

我正在使用 fabric.js 来创建一些动画。

现在我想创建一个动画的gif格式，所以想以20帧/秒的速度进行 "画布捕捉"，即每秒钟捕捉20个pngs。 然后我可以使用转换功能将pngs转换为gif。

我在服务器上使用node.js运行动画。

问题：我如何保存pngs？我怎样才能在动画运行时保存pngs？ 因为它只在服务器端运行，所以不需要实时编写或处理。

Answer 1

你可以有一个这样的。

var blob_array = new FormData(), png_index = 0;

function canv2blob(canv) {
  return new Promise(function(resolve, reject) {
    canv.getElement().toBlob(function(blob) {
      resolve(blob);
    },'image/png',0.8); //0.8 is quality. keep it as you like
  });
}

function process_blob(canv){
 canv2blob(canv).then(function(blob){
     blob_array.append(png_index,blob);
 });
}

然后在 onChange 事件，调用该函数创建一个 FormData 对象，包含可以发布到服务器的png blobs。

onChange: function(){ 
          canvas.renderAll.bind(canvas);
          process_blob(canvas);
          png_index++;
      },