Top community members
All Wiki Articles Create Wiki Article

Many years me and my friends we were volunteers on my university doing programming classes for young people.

I got main conclusion: Young people are awesome, especially students, because they always bring new and fresh ideas :)
* I loved to do it but my time is limited

  I decided to create something that will help millions of students

Now I am here

co-founder

JavaScript - convert blob to base64

0 contributions
1 points

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

 

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey đź‘‹
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more