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>
It works well, thnx
Good, it works as expected
you are the best.
go ahead budy
thanks!
it helped me a lot.
This is just what I needed!!!
I already use this code in my code, and it works like a charm
thanks for the post