Base64 text represents binary files such as images in text format. It is designed to binary format data across channels that support only text format, such as email applications. This tutorial will teach you how to get Base64 encoded data from an HTML image element in JavaScript. The image element displays static images in HTML, whereas Canvas uses JavaScript to draw graphics into it. The Canvas also provides an API method to get the Base64 data of the image drawn on the canvas element. toDataURL() Base64 String Format Base64 strings are in a text format; sometimes, it has a metadata prefix. When it has a Metadata prefix, it is known as . DataURL Syntax data:[<mediatype>][;base64],<data> Where, - data encoding prefix data - is a string that represents the type of the file Mediatype Mimetype - Encoding name that represents that the content is encoded in a Base64 string Base64 - Textual representation of the binary file encoded in the Base64 format data Example data:image/png;base64,<Base64 String> The above string represents a Base64 string of a PNG image. Let us see how to get the Data URL of the image displayed in the HTML image. HTML Code Let us create an HTML page with an image and Canvas elements. element is to Image display the image in the HTML element is to draw the image from the image element and get the Base64 encoded data Canvas Code <img id="imgElement" src="https://picsum.photos/200">

<canvas id="canvasElement" /> Output Using Canva and toDataURL() Method to Get Base64 Encoded Data This section teaches you how to get the Base64 encoded data from the Canvas element using the method in JavaScript. toDataURL() Get the image element using its and store it in the variable ID img Get the canvas element using its and store it in the variable ID canvasElmt Get the context of the canvas element using the element 2D getContext() Using the canvas context, draw the image element into the canvas using the drawImage() method Invoke the method of the Canvas element. It’ll return the Base64 encoded data of the image drawn in the canvas toDataURL() Code var img = document.getElementById("imgElement");

var canvasElmt = document.getElementById("canvasElement");

var ctx = canvasElmt.getContext("2d");

ctx.drawImage(img, 10 ,10);

console.log(canvasElmt.toDataURL()); Output "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAABGJJREFUeF7t1AEJAA==" Conclusion In this tutorial, you’ve learned how to get the Base64 encoded data of an Image displayed in the HTML image element by drawing it into the canvas element.

How to Get Base64 Encoded Data from an HTML Image Element in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Convert Base64 Data to Files on Linux and Mac OS

How to Convert Base64 Data to Files on Linux and Mac OS

Learn More About Data Encoding: Base64 vs Base58

Stop With the Obfuscation: Encoding and Encryption are Not the Same

Canvas And React: A Simple Guide To Data Charts

How to Convert Base64 Data to Files on Linux and Mac OS

How to Convert Base64 Data to Files on Linux and Mac OS

Learn More About Data Encoding: Base64 vs Base58

Stop With the Obfuscation: Encoding and Encryption are Not the Same

Canvas And React: A Simple Guide To Data Charts

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps