How to convert image into base64 string using JavaScript ? Last Updated : 25 Jul, 2024 Comments Improve Suggest changes Like Article Like Report In this article, we will convert an image into a base64 string using Javascript. The below approaches show the methods to convert an image into a base64 string using Javascript.ApproachHere we will create a gfg.js file which will include JavaScript code and one gfg.html file.Now we will put onchange on the input type and this will execute a function imageUploaded() when you upload an image.Now we will use a file reader and use the onload event in the file reader then we will get the image URL and we need to remove some text to get the base64 string and store it in a variable named base64String and print on the console.And if you want to use this base64 you can write logic on the button click like here we will alert this base64 String.Example: This example shows the above-explained approach. HTML <!DOCTYPE html> <html> <head> <title> How to convert image into base64 string using JavaScript ? </title> </head> <body> <input type="file" name="" id="fileId" onchange="imageUploaded()"> <br><br> <button onclick="displayString()"> Display String </button> <script> let base64String = ""; function imageUploaded() { let file = document.querySelector( 'input[type=file]')['files'][0]; let reader = new FileReader(); console.log("next"); reader.onload = function () { base64String = reader.result.replace("data:", "") .replace(/^.+,/, ""); imageBase64Stringsep = base64String; // alert(imageBase64Stringsep); console.log(base64String); } reader.readAsDataURL(file); } function displayString() { console.log("Base64String about to be printed"); alert(base64String); } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to convert image into base64 string using JavaScript ? R rajatagrawal5 Follow Improve Article Tags : JavaScript Web Technologies javascript-string JavaScript-Methods JavaScript-Questions +1 More Similar Reads How To Convert Base64 to JSON String in JavaScript? There could be situations in web applications, where there is a need to decode the data from Base64 format back into its original JSON format. It generally happens when one has to transmit data over the network where Base64 encoding is well suited for encoding binary data.In this article, we will se 2 min read How to Convert JSON to base64 in JavaScript ? Base 64 is the encoding scheme that represents binary data in a printable ASCII format, commonly used for data serialization and transmission. Table of Content Using btoa functionUsing Manual ConversionUsing btoa functionIn this approach, we're using btoa to encode a UTF-8 string representation of a 2 min read How to convert blob to base64 encoding using JavaScript ? Blob in JavaScript is a fundamental data type representing bytes of data. It serves as the underlying structure for files and is supported by web browsers, capable of storing and retrieving data from memory. Blobs have specific sizes and file types like regular files and can be handled with Buffers, 2 min read How to Convert Base64 to File in JavaScript? In web development, Base64 encoding is often used to represent binary data, such as images or files, with a string of ASCII characters, sometimes you may be required to change this Base64 string back into a file for instance for file uploads, downloads, or processing in the browser, this article aim 2 min read How to Convert Base64 to Blob in JavaScript? Working with files and data in web applications often involves dealing with binary data. One common scenario is converting a Base64 string into a Blob object, which can then be used in various ways, such as creating downloadable files or uploading images to a server. This article will guide you thro 4 min read Convert base64 String to ArrayBuffer In JavaScript A Base64 string represents binary data in an ASCII string format by translating it into a radix-64 representation. Often used to encode binary data in text-based formats like JSON or HTML, it needs to be converted back into its original binary format for further processing. An ArrayBuffer in JavaScr 2 min read JavaScript | Encode/Decode a string to Base64 To encode or decode strings in JavaScript, we can use the built-in functions provided by the language. These functions help in encoding special characters in a URL or decoding encoded strings back to their original form. 1. btoa() MethodThis method encodes a string in base-64 and uses the "A-Z", "a- 6 min read How to Convert JSON to Blob in JavaScript ? This article explores how to convert a JavaScript Object Notation (JSON) object into a Blob object in JavaScript. Blobs represent raw data, similar to files, and can be useful for various tasks like downloading or processing JSON data. What is JSON and Blob?JSON (JavaScript Object Notation): A light 2 min read How to Crop an Image in JavaScript? To crop an image in JavaScript, you can use the <canvas> element to manipulate the image's dimensions and crop it to a specified area. This approach is flexible and works entirely in the browser without needing external libraries. Here's a step-by-step example demonstrating how to crop an imag 3 min read How to create an image map in JavaScript ? An image map is nothing but an image that is broken into various hotspots and each hotspot will take you to a different file. Hotspots are nothing but clickable areas which we create on an image by using the <area> tag. This type of map is called a client-side image map as the map is embedded 3 min read Like