Sometimes, we want to save canvas as png image with JavaScript.
In this article, we’ll look at how to save canvas as png image with JavaScript.
How to save canvas as png image with JavaScript?
To save canvas as png image with JavaScript, we can use the FileSaver.js library.
We install it with
npm install file-saver --save
Then we use it by writing
import { saveAs } from "file-saver";
const canvas = document.getElementById("my-canvas");
//...
canvas.toBlob((blob) => {
saveAs(blob, "image.png");
});
We select the canvas with getElementById.
Then we call canvas.toBlob with a callback that calls saveAs to save the blob with the canvas content to image.png.
Conclusion
To save canvas as png image with JavaScript, we can use the FileSaver.js library.
