FileSaver.js with a Fabric canvas

Question

I was trying to use FileSaver.js with a Fabric.canvas object, but it seems that Fabric js has no blob option.

I'm using the Meteor framework by the way.

How can I export a Fabric canvas without using the basic canvas.toDataUrl ?'

Thanks :)

Answer 1

You can achieve this by using the native Canvas element.

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

// ... your code here ...

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

And if you want this to work with Safari, you can use the Sebastian Tschan Javascript Canvas to Blob polyfill.

Answer 2

Fabric has no direct option of Blob. But you can export it in json by canvas.toJSON() or in image by canvas.toDataURL(). Then you convert the data in blob simply doing this.

Export fabric canvas in blob:

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

or

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

See in fiddle