The article demonstrates how to convert the image into a base64 string by the utilization of JavaScript. The outcome of the string is useful for transferring the data with minimum resources. Moreover, the encrypted string is secure from any malicious threat. The content to convert the image into base64 is listed below.
How to Convert Image Into a Base64 String Using JavaScript?
The representation of strings is an important task that converts the image into ASCII format. The string is a combination of alphabets, characters, and numbers. It is useful to convert the image into a base64 string using the local file system.
The converter automatically detects the type of content for uploading the image. Moreover, the user can select a specific image format to convert the image into a base64 string format. It consumes very little memory due to compression, which is helpful for transferring data. Moreover, users can utilize conversion by accessing the image source through the URL.
Important: Most developers do not follow random images from the internet by accessing through URL and converting to base64 string due to security concerns.
Example
An example is adapted to convert an image into a base64 string by employing JavaScript.
Code
<h2>Example of converting image to string</h2>
<body>
<input type="file" onchange="enc(this)" />
<script>
function enc(element) {
let reader = new FileReader();
let f = element.files[0];
reader.onloadend = function() {
document.write('String Output: ', reader.result); }
reader.readAsDataURL(f); }
</script>
</body></html>
The explanation of this code is as follows:
- Firstly, a user-defined method enc() is created by passing an argument element.
- After that, an object of the FileReader() function is employed.
- The reader.onloadend() event triggers a function that will return the result property of the reader object. And the data/file is presented as a URL.
Output
Upon clicking the “Choose File” button, the user needs to choose the image file. Once the image file is selected, you will see the corresponding string on the screen.
Conclusion
The image is converted into a base64 string using a built-in function in JavaScript FileReader(). This method extracts the contents of a file from the local file system. After that, a base64 encryption scheme is applied that converts the binary data into ASCII format. In this post, you learned the conversion of the image into base64 utilizing JavaScript. The objective of using this conversion is to transfer secure data in a string format.\
