Languages
[Edit]
EN

JavaScript - convert blob to base64

1 points
Created by:
Marcin
15710

In this article we would like to show how in JavaScript convert blob or file object to Data URLs encoded with Base64.

1. Base64 in data URL example

In this section presented solution get base64 data placed inside data URL from indicated blob or file object.

Example data URL looks this way:

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

Where ... are symbolic to do not display all long value in this example.

Data URL value can be used with any code that needs to work some resource link, e.g.

We can display image:

var image = new Image(); image.src = dataUrl;

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

Full 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 blob = ...; // blob or file object with some picture

readDataURL(blob, function(dataUrl, error) {
	if (error) {
		console.log(error);
	} else {
		var image = document.querySelector('#my-image'); // <img id="my-image">
		image.src = dataUrl; // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAb8...
	}
});

dataUrl value:

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

2. Base64 only example

In this section presented solution get only base64 data from indicated blob or file object.

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...

 

Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join