Fabric.js Tutorial – Part 6: Export Canvas to Image

Fabric.js Tutorial – Part 6: Export Canvas to Image


In this video, we’ll show you how to export the entire Fabric.js canvas into downloadable png image First, let’s create a button and a click event handler We’ll convert a canvas into “Blob” object – using canvas.toBlob() method toBlob method has a callback function when a canvas has been converted into a Blob object Then inside a function, we’ll use a small library call “FileSaver.js” to let user save our blob object as an image (Please find a link at the video description below) Just call saveAs and pass the blob object and filename as a parm Oh, and don’t forget to include the FileSaver.js to your page Just download it and put into your web directory The only downside of this approach is IE doesn’t support toBlob method. So we’ll need to include a Polyfill call canvas-toBlob.js to be able to use toBlob with IE Just download and put it into your web directory And include it in your page Hope you like our tutorials! Don’t forget to subscribe 🙂

13 Replies to “Fabric.js Tutorial – Part 6: Export Canvas to Image”

  1. I was hoping to find a "SVG Chart to downloadable PNG" within this tutorial that would work with IE 11….. since IE11 has security issue bug when using "toDataURL"….. I'm running out of options but my next attempt will be using "saveSvgAsPng.js"

  2. when i click save
    i get an error

    FileSaver.js:16 Uncaught SyntaxError: Unexpected token export
    se.html:20 Uncaught DOMException: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at HTMLInputElement.<anonymous> (file:///D:/sharingGroup/fabricTask/se.html:20:17)
    at HTMLInputElement.dispatch (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:6466)
    at HTMLInputElement.r.handle (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js:3:3241)

  3. Hi Red, I’m getting the following error when clicking Save. Any ideas? Uncaught DOMException: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at HTMLInputElement.<anonymous> (file:///Users/Rob/Downloads/FabricJS/index.html:28:18)
    at HTMLInputElement.dispatch (file:///Users/Rob/Downloads/FabricJS/jquery-3.3.1.min.js:2:41772)
    at HTMLInputElement.y.handle (file:///Users/Rob/Downloads/FabricJS/jquery-3.3.1.min.js:2:39791)

Leave a Reply

Your email address will not be published. Required fields are marked *