Skip to content
Related Articles
Open in App
Not now

Related Articles

How to convert image into base64 string using JavaScript ?

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 06 Jan, 2023
Improve Article
Save Article

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.

Approach :

  • Here 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 than 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




<script>
    let base64String = "";
     
    function imageUploaded() {
        var file = document.querySelector(
            'input[type=file]')['files'][0];
     
        var 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>
 
 
<input type="file" name="" id="fileId" onchange="imageUploaded()">
<br><br>
 
<button onclick="displayString()">
    Display String
</button>


Output:

 convert image into base64 string using JavaScript


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!