JavaScript - convert Blob to base64
In this article, we would like to show how using JavaScript, convert blob or file objects to Base64.
In the article, we present two solutions.
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:
xxxxxxxxxx |<--- 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.:
xxxxxxxxxxvar image = new Image();image.onload = function() { // something here ...};image.src = dataUrl;Note: read this article to see practical online runnable example.
Practical example:
xxxxxxxxxxfunction 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 picturereadDataURL(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):
xxxxxxxxxxdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAb8...
In this section, the presented solution returns only base64 data from indicated blob or file objects.
Practical example:
xxxxxxxxxxfunction 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 picturereadBase64(blob, function(base64, error) { if (error) { console.log(error); } else { console.log(base64); // iVBORw0KGgoAAAANSUhEUgAAAb8AAAGSCAYAAABzIc+aAAAgA... }});Example output:
xxxxxxxxxxiVBORw0KGgoAAAANSUhEUgAAAb8AAAGSCAYAAABzIc+aAAAgA...
