带有Fabric画布的FileSaver.js

Question

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

顺便说一句,我正在使用Meteor框架.

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

谢谢 :)

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到Blob polyfill 。

Answer 2

Fabric没有Blob的直接选项。但您可以通过 jsoncanvas.toJSON()或 image by导出它canvas.toDataURL()。然后您只需执行此操作即可将数据转换为 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"});

在小提琴中查看