FileSaver.js与织物画布

Question

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

我正在使用Meteor框架。

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

谢谢:)

Answer 1

面料没有Blob的直接选项。但是，您可以通过canvas.toJSON()或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"}); 

See in fiddle

Answer 2

您可以通过使用本地Canvas元素实现这一目标。

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

// ... your code here ... 

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

如果你想这与Safari浏览器，则可以使用塞巴斯蒂安Tschan Javascript Canvas to Blob polyfill。