Search code examples
javascriptfileapi

Blob from DataURL?


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?


Solution

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