JavaScript is an object-oriented computer programming language commonly used to create interactive effects within web browsers. it is the world’s most popular programming language. JavaScript is the programming language of the Web.

Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII ( American Standard Code For Information Interchange) string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding.

This blog is about programming and how to convert images to Base64 using JavaScript.

HTML file. Index.html

<!DOCTYPE html>
<html>

<head>
    <title>Image To Base64 - PHP to JS</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
</head>

<body>
    <div class="container" class="a">
        <center>
            <input type="file" class="btn btn-primary" id="file" onchange="img_base64(this)" name="upload"><br><br>
            <textarea rows="10" cols="50" id="base64"></textarea> <br><br>
            <button class="btn btn-primary" onclick="base64_displayImage();">Show Image</button> <br><br>
            <div id="Picture" class="a">
                <img class="b" src="" id="idpic">
            </div>
        </center>
    </div>
</body>

</html>

CSS file. style.css

.a {    height: auto;    border: 1px solid black;}
.b {    height: 500px;    border: 1px solid black;}

JS file. script.js

function img_base64(element) {
    var file = element.files[0];
    var reader = new FileReader();
    reader.onloadend = function() {
        console.log('RESULT', reader.result)
            //$('#stringtypeImage').HTML(reader.result) // = reader.result;
        document.getElementById('base64').innerText = reader.result;
    }
    reader.readAsDataURL(file);
    document.getElementById('base64').innerText = reader.result;
}

function base64_displayImage() {
    var vals = document.getElementById('base64').value;
    document.getElementById('idpic').setAttribute("src", vals);
}


One Reply to “Image to Base64 using JavaScript”

Leave a Reply

Your email address will not be published. Required fields are marked *