Convert Local Image To Base64 JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
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>
- First, we write <! DOCTYPE html> which we used as the instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- 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.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Now create a < style > tag to add style to the HTML page.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Create a <input> tag and add the type of file with the id ‘fileInput’.
- Now create a <script> tag to write the JavaScript file
- Use const and add document,getElementById() of the input tag
- Using addEventListener() tag “change” .
- Within the tag, create a constant of the file, with files[0] array.
- Another constant reader with a new FileReader() function.
- Again create a .addEventListener() tag with “load”. And using console.log() to display the result.
- 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.