Languages
[Edit]
EN

JavaScript - convert blob to base64

4 points
Created by:
Giles-Whittaker
589

In this article, we would like to show how using JavaScriptconvert 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...

 

Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join