Categories
JavaScript Answers

How to get binary (base64) data from HTML5 canvas with JavaScript?

Spread the love

Sometimes, we want to get binary (base64) data from HTML5 canvas with JavaScript.

In this article, we’ll look at how to get binary (base64) data from HTML5 canvas with JavaScript.

How to get binary (base64) data from HTML5 canvas with JavaScript?

To get binary (base64) data from HTML5 canvas with JavaScript, we can use the canvas toDataURL method.

For instance, we write

const jpegUrl = canvas.toDataURL("image/jpeg");
const pngUrl = canvas.toDataURL();

to call toDataURL with the MIME type of the image to return.

The canvas data will be returned as a base64 string.

If no argument is set, then a PNG image base64 string is returned.

Conclusion

To get binary (base64) data from HTML5 canvas with JavaScript, we can use the canvas toDataURL method.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.