Blob from DataURL?

Question

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?

Mat · Accepted Answer · 2017-06-15 19:46:05Z

221

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;

}

edited Jun 15, 2017 at 19:46

Mat

6,7357 gold badges37 silver badges40 bronze badges

answered Sep 6, 2012 at 12:41

devnull69

16.6k9 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Jesse Crossen Over a year ago

The duplicated split seems a bit wasteful, given that this could be a very large string.

Blaze Over a year ago

What is the role of the variable "ia" - its assigned a value but is never used in forming the blob. Why?

Mat Over a year ago

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

B T Over a year ago

How do I find SO answer #6850276 ?

Brett Zamir Over a year ago

@BT : I guess stackoverflow.com/a/30407840/271577 is intended (note the redirected URL includes "#6850276").

|

Endless · Accepted Answer · 2016-04-22 22:27:43Z

101

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

edited Apr 22, 2016 at 22:27

answered Mar 23, 2016 at 16:16

Endless

38.7k14 gold badges118 silver badges138 bronze badges

5 Comments

alex_1948511 Over a year ago

Very elegant. Unfortunately edge 13 and safari doesn't support "fetch".

Endless Over a year ago

It is supported in edge 14 and safari 10.1

Christian d'Heureuse Over a year ago

Async version: const blob = await (await fetch(url)).blob();

pauljeba Over a year ago

Works great, but the file doesn't have an extension when read from server. Any thoughts?

Dennis C Over a year ago

The bigger problem of this fetch is it force to having a async API.

Paul Roub · Accepted Answer · 2020-07-01 13:09:41Z

58

In modern browsers one can use the one liner suggested by Christian d'Heureuse in a comment:

const blob = await (await fetch(dataURI)).blob();

edited Jul 1, 2020 at 13:09

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

answered Jul 1, 2020 at 13:00

Jan Derk

3,0601 gold badge31 silver badges22 bronze badges

2 Comments

standielpls Over a year ago

One caveat with this approach is that this could violate your content security policy (CSP), if your application has any.

Danylo Fedorov Over a year ago

Adding to what @standielpls commented, you'll have to add connect-src data: to your Content-Security-Policy

Shawn Wu · Accepted Answer · 2013-07-26 08:10:31Z

22

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

answered Jul 26, 2013 at 8:10

Shawn Wu

5077 silver badges19 bronze badges

2 Comments

Zephyr Over a year ago

The dataTYPE is embedded in dataURI and hence should be parsed as in the first answer.

Shawn Wu Over a year ago

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/…

Adria · Accepted Answer · 2015-06-05 12:08:49Z

12

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

answered Jun 5, 2015 at 12:08

Adria

9,1514 gold badges39 silver badges32 bronze badges

2 Comments

Martin Ždila Over a year ago

Will not work in Safari - it will throw cross-origin error if page is loaded from HTTPS.

Michal Over a year ago

The question is Blob from DataURL?

HaNdTriX · Accepted Answer · 2015-01-06 12:46:26Z

5

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

edited Jan 6, 2015 at 12:46

answered Jan 5, 2015 at 14:13

HaNdTriX

29.9k11 gold badges82 silver badges86 bronze badges

Comments

B T · Accepted Answer · 2017-06-20 02:21:27Z

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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 15, 2019 at 21:41

georgeawg

49k13 gold badges78 silver badges98 bronze badges

1 Comment

PuiMan Cheui Over a year ago

Chrome throws net::ERR_INVALID_URL

kantuni · Accepted Answer · 2023-12-08 12:31:04Z

Refactored version of the accepted answer.

// NOTE: This function doesn't handle URLEncoded Data URLs.
// Data URL format – data:[<mediatype>][;base64],<data>
function dataUrltoBlob(dataUrl: string): Blob {
  const [meta, data] = dataUrl.split(",")

  // Convert the base64 encoded data to a binary string.
  const byteString = atob(data)

  // Get the MIME type.
  const [mimeTypeWithDataPrefix] = meta.split(";")
  const mimeType = mimeTypeWithDataPrefix.replace("data:", "")

  // Convert the binary string to an ArrayBuffer.
  const arrayBuffer = Uint8Array.from(byteString, (c) => c.charCodeAt(0)).buffer

  // Create a blob from the ArrayBuffer.
  return new Blob([arrayBuffer], { type: mimeType })
}

P.S. Thanks to @devnull69 for the original solution.

Tilman Vogel · Accepted Answer · 2022-01-01 17:43:53Z

1

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

answered Jan 1, 2022 at 17:43

Tilman Vogel

9,8704 gold badges35 silver badges34 bronze badges

Comments

3on · Accepted Answer · 2012-08-28 23:23:40Z

-2

use

FileReader.readAsArrayBuffer(Blob|File)

rather than

FileReader.readAsDataURL(Blob|File)

answered Aug 28, 2012 at 23:23

3on

6,3493 gold badges29 silver badges22 bronze badges

1 Comment

Shane Holloway Over a year ago

I have to store it as a DataURL for an indefinite period in localStorage, so using the alternative ArrayBuffer path won't work.

Collectives™ on Stack Overflow

Blob from DataURL?

11 Answers 11

11 Comments

5 Comments

2 Comments

2 Comments

2 Comments

Comments

Comments

Create a blob using XHR API:

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

11 Comments

5 Comments

2 Comments

2 Comments

2 Comments

Comments

Comments

Create a blob using XHR API:

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related