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);
}
Open github.com
Open Image to base64

Related Topics

By: Jave LupangoPosted on Categories : Categories :

3 Replies to “Image to Base64 using JavaScript”

  2. Do you mind if I quote a couple of your posts as long as I provide credit and sources back to your webpage?
    My website is in the very same niche as yours and my users would truly benefit from some of the
    information you present here. Please let me know if this alright with you.
    Thanks!

    Reply

Leave a Reply

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