Blob from DataURL? Blob from DataURL? javascript javascript

Blob from DataURL?


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;}


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