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.
About Riya
