Build a Local Image Blob File to Base64 String Converter in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be encoding the local image file to base64 string in browser in html5 css3 and javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Convert Blob to Base64 String</title>
</head>

<body>
<div>Hello GeeksForGeeks</div>
<script type="text/javascript">
    let blob = new Blob(["GeeksForGeeks"], { type: "text/plain" });
    // The full Blob Object can be seen
    // in the Console of the Browser
    console.log('Blob - ', blob);

    var reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function () {
    var base64String = reader.result;
    console.log('Base64 String - ', base64String);

    // Simply Print the Base64 Encoded String,
    // without additional data: Attributes.
    console.log('Base64 String without Tags- ',
base64String.substr(base64String.indexOf(', ') + 1));
        }
    </script>
</body>
</html>

 

See also  Javascript Project to Detect AdBlocker on HTML5 Website in Browser Full Project For Beginners

 

 

Leave a Reply