Languages
[Edit]
EN

JavaScript - convert blob to base64

1 points
Created by:
Marcin
2447

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

 

Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.