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>