All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Convert Local Image To Base64 JavaScript

Last Updated : Mar 11, 2024

Convert Local Image To Base64 JavaScript

In this article we will show you the solution of convert local image to base64 JavaScript, to convert the local image to a Base 64 string we used readAsDataURL() method.

Now let us understand the readAsDataURL() method :

readAsDataURL(): this method is used to read the contents of a blob or file.

We can see the string on the console terminal of the HTML page.

Step By Step Guide On Convert Local Image To Base64 JavaScript :-

<!DOCTYPE html>
<html lang = " en " >
<head>
    <meta charset = " UTF - 8" >
    <meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
    <meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
    <title> convert local image to base64 javascript </title>
    <style>
    body {
        font-family : 'Lucida Sans', Verdana , sans-serif ;
    }
    h1 {
     font-size : larger ;
     font-weight : bolder ;
     color : rgb(113, 221, 113) ;
     text-align : center ;
    }
    h3 {
        text-align : center ;
    }
</style>
</head>
<body>
    <h1> TALKERSCODE </h1>
    <h3> convert local image to base64 javascript </h3>
    <input type="file" name="" id="fileInput">
    <script>
        const fileInput = document.getElementById('fileInput') ;
        fileInput.addEventListener ("change" , e=> {
            const file = fileInput.files[0] ;
            const reader = new FileReader() ;
            reader.addEventListener("load", () => {
                console.log(reader.result) ;
            }) ;
            reader.readAsDataURL(file) ;
        }) ;
    </script>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as the instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As mentioned above, the <head> tag contains information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Now create a < style > tag to add style to the HTML page.
  6. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  7. <h1> tag used to add heading here.
  8. Create a <input> tag and add the type of file with the id ‘fileInput’.
  9. Now create a <script> tag to write the JavaScript file
  10. Use const and add document,getElementById() of the input tag
  11. Using addEventListener() tag “change” .
  12. Within the tag, create a constant of the file, with files[0] array.
  13. Another constant reader with a new FileReader() function.
  14. Again create a .addEventListener() tag with “load”. And using console.log() to display the result.
  15. Lastly use the .readAsDataURL() tag to convert the image file into a base 64 string.

Conclusion :-

At last, here in conclusion, here we can say that with this article’s help, we know how to convert local images to base64 JavaScript using JavaScript.

I hope this article on convert local image to base64 JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪