JavaScript - convert Blob to base64

In this article, we would like to show how using JavaScript, convert blob or file objects to Base64.

In the article, we present two solutions.

1. Data URL with Base64 example

In this section, the presented solution returns base64 data for an indicated blob or file object.

In JavaScript, it is possible to convert objects to Data URLs with different encodings. Using base64 encoding we are able to extract data easily.

Data URL concept:

               |<--- metadata ---->| |<------ base64 part ------->|
               |                   | |                            |
var dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAb8...';

Where ... used to shortcut long values I the presented example.

Data URLs were created to store data in URL. The above dataUrl can be used to display images, e.g.:

var image = new Image();

image.onload = function() {
    // something here ...
};

image.src = dataUrl;

Note: read this article to see practical online runnable example.

Practical example:

function readDataURL(blob, callback) {
	if (window.FileReader) {
		var reader = new FileReader();
		reader.onload = function() {
			var dataUrl = reader.result;
			if (dataUrl == null) {
				callback(null, 'Data URL is not available.');
			} else {
				callback(dataUrl, null);
			}
		};
		reader.onerror = function() {
			callback(null, 'Incorrect blob or file object.');
		};
		reader.readAsDataURL(blob);
	} else {
		callback(null, 'File API is not supported.');
	}
}


// Usage example:

var image = document.querySelector('#my-image');  // <img id="my-image">
		
var blob = ...;  // blob or file object with some picture

readDataURL(blob, function(dataUrl, error) {
	if (error) {
		console.log(error);
	} else {
		console.log(dataUrl);  // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAb8...
		image.src = dataUrl;
	}
});

Example output (dataUrl value):

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAb8...

2. Only Base64 data example

In this section, the presented solution returns only base64 data from indicated blob or file objects.

Practical example:

function extractBase64(dataUrl) {
	var index = dataUrl.indexOf('base64,');
	if (index == -1) {
		return null;
	}
	return dataUrl.substring(index + 7);
}

function readBase64(blob, callback) {
	if (window.FileReader) {
		var reader = new FileReader();
		reader.onload = function() {
			var dataUrl = reader.result;
			if (dataUrl != null) {
				var base64 = extractBase64(dataUrl);
				if (base64 != null) {
					callback(base64, null);
					return;
				}
			}
			callback(null, 'Base64 data is not available.');
		};
		reader.onerror = function() {
			callback(null, 'Incorrect blob or file object.');
		};
		reader.readAsDataURL(blob);
	} else {
		callback(null, 'File API is not supported.');
	}
}


// Usage example:

var blob = ...; // blob or file object with some picture

readBase64(blob, function(base64, error) {
	if (error) {
		console.log(error);
	} else {
		console.log(base64);  // iVBORw0KGgoAAAANSUhEUgAAAb8AAAGSCAYAAABzIc+aAAAgA...
	}
});

Example output:

iVBORw0KGgoAAAANSUhEUgAAAb8AAAGSCAYAAABzIc+aAAAgA...