JavaScript - convert Blob to Base64 (ES5)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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);  // e.g. iVBORw0KGgoAAAANSUhEUgAAAb8AAAGSCAYAAABzIc+aAAAgA...
	}
});


// See also:
//
//     1. https://dirask.com/snippets/JavaScript-convert-base64-to-Blob-j8dYrj