How to Export Canvas to Image Using Blob.js and Save it as PNG Image Using FileSaver.js Full Example For Beginners

You are currently viewing How to Export Canvas to Image Using Blob.js and Save it as PNG Image Using FileSaver.js Full Example For Beginners

 

Welcome folks today in this blog post we will be exporting canvas to image file using blob.js and save it as a png image file using filesaver.js library. All the source code of the examples are given below.

 

 

 

Requirements

 

 

 

The requirements of the application is using two libraries

 

blob.js

 

filesaver.js

 

 

So you can include the libraries inside your project by a cdn

 

filesaver.js cdn

 

 

 

Now just make a blob.js file inside your root folder and copy paste the following code

 

 

 

 

So now make a index.html file and copy paste the following code.

 

 

 

 

So you can see inside this block of code we are targeting the canvas by their id and adding text to the canvas. Here we are using the font arial and also we are writing hello world at x coordinate 10 and y coordinate 50 respectively. And lastly we are using the toBlob method to convert the canvas to blob object. And then we are converting the blob object to image file. Here we are using the filesaver.js library to actually convert the blob to image and download it as a png file.

 

 

 

 

 

 

 

Adding Image in Canvas

 

 

So in this example we will be adding image to canvas and then exporting to image

 

 

 

 

So in this block of code we are using drawImage method to draw the image on the canvas.

 

 

Leave a Reply