Question

我试图将FileSaver.js与Fabric.canvas对象一起使用，但似乎Fabric js没有blob选项。

我顺便使用Meteor框架。

如何在不使用基本canvas.toDataUrl的情况下导出Fabric画布？＆＃39;

谢谢：）

Answer 1

您可以使用本机Canvas元素来实现此目的。

var canvas = new fabric.Canvas("canvas");

// ... your code here ...

canvas.getElement().toBlob(function(blob) {
  saveAs(blob, "canvas.png");
});

如果你想让它与Safari配合使用，你可以使用Sebastian Tschan Javascript Canvas to Blob polyfill。

Answer 2

Fabric没有Blob的直接选项。但您可以在canvas.toJSON()或j canvas.toDataURL()的图像中以json格式导出。然后你只需执行此操作即可转换blob中的数据。

在 blob ：

中

导出光纤网画布

  var data = JSON.stringify(canvas.toJSON()),           
        blob = new Blob([data], {type: "octet/stream"});

或

  var data = canvas.toDataURL(),           
        blob = new Blob([data], {type: "octet/stream"});