JavaScript – Convert Image to Base64 String

This post shows you two approaches how to convert an image to a Base64 string using JavaScript: HTML5 Canvas and FileReader.

 

1. HTML5 Canvas approach

function toDataURL(src, callback) {
    var image = new Image();
    image.crossOrigin = 'Anonymous';
 
    image.onload = function() {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        canvas.height = this.naturalHeight;
        canvas.width = this.naturalWidth;
        context.drawImage(this, 0, 0);
        var dataURL = canvas.toDataURL('image/jpeg');
        callback(dataURL);
    };

    image.src = src;
}

The above code we load the image into Image object, draw it to the canvas and then convert it to Base64 image data URL.

Here is an example that shows how to use HTML5 Canvas approach. Click on the “Run Example” button to see how it works.

example1.htmlRun Example
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript – Convert Image to Base64 String</title>
</head>
<body>
    <h2>HTML5 Canvas approach</h2>
    <div>Data URL:</div>
    <div id="result"></div>

    <script type="text/javascript">
        function toDataURL(src, callback) {
            var image = new Image();
            image.crossOrigin = 'Anonymous';
         
            image.onload = function() {
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                canvas.height = this.naturalHeight;
                canvas.width = this.naturalWidth;
                context.drawImage(this, 0, 0);
                var dataURL = canvas.toDataURL('image/jpeg');
                callback(dataURL);
            };

            image.src = src;
        }

        toDataURL('https://www.gravatar.com/avatar', function(dataURL) {
            // do something with dataURL
            document.getElementById('result').innerHTML = dataURL;
        });

    </script>

</body>
</html>

 

2.  FileReader approach

function toDataURL(src, callback) {
    var xhttp = new XMLHttpRequest();

    xhttp.onload = function() {
        var fileReader = new FileReader();
        fileReader.onloadend = function() {
            callback(fileReader.result);
        }
        fileReader.readAsDataURL(xhttp.response);
    };

    xhttp.responseType = 'blob';
    xhttp.open('GET', src, true);
    xhttp.send();
}

The above code we load the image as Blob via XMLHttpRequest, then use FileReader to convert the image to Base64 image data URL.

Here is an example that shows how to use FileReader approach. Click on the “Run Example” button to see how it works.

example2.htmlRun Example
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript – Convert Image to Base64 String</title>
</head>
<body>
    <h2>FileReader approach</h2>
    <div>Data URL:</div>
    <div id="result"></div>

    <script type="text/javascript">
        function toDataURL(src, callback) {
            var xhttp = new XMLHttpRequest();

            xhttp.onload = function() {
                var fileReader = new FileReader();
                fileReader.onloadend = function() {
                    callback(fileReader.result);
                }
                fileReader.readAsDataURL(xhttp.response);
            };

            xhttp.responseType = 'blob';
            xhttp.open('GET', src, true);
            xhttp.send();
        }

        toDataURL('https://www.gravatar.com/avatar', function(dataURL) {
            // do something with dataURL
            document.getElementById('result').innerHTML = dataURL;
        });

    </script>

</body>
</html>

0 0 vote
Article Rating
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Favor Hr
Favor Hr
2 years ago

It works well, thnx

Mark Sander
Mark Sander
2 years ago

Good, it works as expected

pejman
pejman
2 years ago

you are the best.
go ahead budy

yuris
yuris
2 years ago

thanks!
it helped me a lot.

Aberfa
Aberfa
2 years ago

This is just what I needed!!!
I already use this code in my code, and it works like a charm

Siddharth
Siddharth
2 years ago

thanks for the post

6
0
Would love your thoughts, please comment.x
()
x