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。