Fabric.js - 保存动画快照

【问题标题】：Fabric.js - Saving snapshots of animationFabric.js - 保存动画快照
【发布时间】：2020-04-23 02:22:22
【问题描述】：

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

现在我想创建一个动画的 gif，所以想要一个 20 fps 的“画布捕获”。即每秒20个png。然后我可以使用 convert 将 png 转换为 gif。

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

问题：如何在动画运行时保存 png？它不必实时写入或处理，因为它只在服务器端运行。

【问题讨论】：

标签： html animation canvas fabricjs capture

【解决方案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 事件中，调用该函数来创建一个包含可以发布到服务器的png blob 的FormData 对象。

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

【讨论】：