带有织物画布的FileSaver.js

Question

我试着在Fabric.canvas对象中使用FileSaver.js，但是Fabric js似乎没有blob选项。

顺便说一下，我正在使用Meteor框架。

如何在不使用基本canvas.toDataUrl的情况下导出Fabric canvas？

谢谢:)

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()将其导出为json格式，也可以通过canvas.toDataURL()将其导出为图像格式。然后，您只需执行以下操作即可转换blob中的数据。

在blob中导出 fabric画布

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

或

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

See in fiddle