Using FileReader
's readAsDataURL()
I can transform arbitrary data into a Data URL. Is there way to convert a Data URL back into a Blob
instance using builtin browser apis?
11 Answers
User Matt has proposed the following code a year ago ( How to convert dataURL to file object in javascript? ) which might help you
EDIT: As some commenters reported, BlobBuilder has been deprecated some time ago. This is the updated code:
function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var byteString = atob(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
// create a view into the buffer
var ia = new Uint8Array(ab);
// set the bytes of the buffer to the correct values
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
// write the ArrayBuffer to a blob, and you're done
var blob = new Blob([ab], {type: mimeString});
return blob;
}
-
4The duplicated split seems a bit wasteful, given that this could be a very large string. Nov 15, 2016 at 18:50
-
2What is the role of the variable "ia" - its assigned a value but is never used in forming the blob. Why?– BlazeMar 6, 2017 at 6:45
-
1Blaze, Ward: ia is a view of the buffer. So when you set each byte in ia, it is writing into the buffer. Without the loop over ia the buffer will be completely empty.– MatJun 15, 2017 at 19:47
-
1
-
1@BT : I guess stackoverflow.com/a/30407840/271577 is intended (note the redirected URL includes "#6850276"). Oct 16, 2017 at 2:34
Like @Adria method but with Fetch api and just smaller [caniuse?]
Don't have to think about mimetype since blob response type just works out of the box
Warning: Can violate the Content Security Policy (CSP)
...if you use that stuff
var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
fetch(url)
.then(res => res.blob())
.then(blob => console.log(blob))
Don't think you could do it any smaller then this without using lib's
-
1Very elegant. Unfortunately edge 13 and safari doesn't support "fetch". Jul 4, 2016 at 14:07
-
2
-
33Async version:
const blob = await (await fetch(url)).blob();
Mar 29, 2018 at 23:09 -
Works great, but the file doesn't have an extension when read from server. Any thoughts?– pauljebaFeb 26, 2020 at 4:51
-
2
In modern browsers one can use the one liner suggested by Christian d'Heureuse in a comment:
const blob = await (await fetch(dataURI)).blob();
-
One caveat with this approach is that this could violate your content security policy (CSP), if your application has any. Jul 16, 2021 at 16:29
-
Adding to what @standielpls commented, you'll have to add
connect-src data:
to your Content-Security-Policy Jun 23, 2022 at 14:05
dataURItoBlob : function(dataURI, dataTYPE) {
var binary = atob(dataURI.split(',')[1]), array = [];
for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i));
return new Blob([new Uint8Array(array)], {type: dataTYPE});
}
input dataURI is Data URL and dataTYPE is the file type and then output blob object
-
1The
dataTYPE
is embedded indataURI
and hence should be parsed as in the first answer. Aug 25, 2016 at 19:07 -
dataURL2Blob has come from my plugin for image process, you can check out this link. I just copy my own code. github.com/xenophon566/html5.upload/blob/master/js/…– Shawn WuJun 1, 2018 at 11:03
XHR based method.
function dataURLtoBlob( dataUrl, callback )
{
var req = new XMLHttpRequest;
req.open( 'GET', dataUrl );
req.responseType = 'arraybuffer'; // Can't use blob directly because of https://crbug.com/412752
req.onload = function fileLoaded(e)
{
// If you require the blob to have correct mime type
var mime = this.getResponseHeader('content-type');
callback( new Blob([this.response], {type:mime}) );
};
req.send();
}
dataURLtoBlob( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==', function( blob )
{
console.log( blob );
});
-
-
Will not work in Safari - it will throw cross-origin error if page is loaded from HTTPS. Aug 25, 2016 at 10:19
-
try:
function dataURItoBlob(dataURI) {
if(typeof dataURI !== 'string'){
throw new Error('Invalid argument: dataURI must be a string');
}
dataURI = dataURI.split(',');
var type = dataURI[0].split(':')[1].split(';')[0],
byteString = atob(dataURI[1]),
byteStringLength = byteString.length,
arrayBuffer = new ArrayBuffer(byteStringLength),
intArray = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteStringLength; i++) {
intArray[i] = byteString.charCodeAt(i);
}
return new Blob([intArray], {
type: type
});
}
Since none of these answers support base64 and non-base64 dataURLs, here's one that does based on vuamitom's deleted answer:
// from https://stackoverflow.com/questions/37135417/download-canvas-as-png-in-fabric-js-giving-network-error/
var dataURLtoBlob = exports.dataURLtoBlob = function(dataurl) {
var parts = dataurl.split(','), mime = parts[0].match(/:(.*?);/)[1]
if(parts[0].indexOf('base64') !== -1) {
var bstr = atob(parts[1]), n = bstr.length, u8arr = new Uint8Array(n)
while(n--){
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type:mime})
} else {
var raw = decodeURIComponent(parts[1])
return new Blob([raw], {type: mime})
}
}
Note: I'm not sure if there are other dataURL mime types that might have to be handled differently. But please let me know if you find out! Its possible that dataURLs can simply have any format they want, and in that case it'd be up to you to find the right code for your particular use case.
Create a blob using XHR API:
function dataURLtoBlob( dataUrl, callback )
{
var req = new XMLHttpRequest;
req.open( 'GET', dataUrl );
req.responseType = 'blob';
req.onload = function fileLoaded(e)
{
callback(this.response);
};
req.send();
}
var dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
dataURLtoBlob(dataURI , function( blob )
{
console.log( blob );
});
If you need something that works server-side on Google Apps Script, try:
function dataURItoBlob(dataURI) {
// convert base64 to Byte[]
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var data = Utilities.base64Decode(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
var blob = Utilities.newBlob(data);
blob.setContentType(mimeString);
return blob;
}
Use my code convert dataURI to blob. It's simpler and cleaner than others.
function dataURItoBlob(dataURI) {
var arr = dataURI.split(','), mime = arr[0].match(/:(.*?);/)[1];
return new Blob([atob(arr[1])], {type:mime});
}
-
Can you explain why your code doesn't need the conversion to int array while everyone else is doing that?– AmeenOct 18, 2015 at 6:39
-
-
-
3This only works for some basic stuff. You would need to escape + decodeURIComponent it first to support most content-encoding read this. That is why others convert a string to int array to avoid the slow/hungry decodeURIComponent/atob function call and convert directly to the bytes– EndlessApr 22, 2016 at 22:35
-
This is implementation is incorrect, this code only works for ASCII or 7-bit data. Test using Emojis: jsfiddle.net/voidvector/2djwk8e7/10 Jan 1 at 11:31
use
FileReader.readAsArrayBuffer(Blob|File)
rather than
FileReader.readAsDataURL(Blob|File)
-
2I have to store it as a DataURL for an indefinite period in localStorage, so using the alternative
ArrayBuffer
path won't work. Aug 28, 2012 at 23:25