Creating a BLOB from a Base64 string in JavaScript

Question

I have Base64-encoded binary data in a string   const contentType    image png   const b64Data    iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4  8 w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg       I would like to create a blob  URL containing this data and display it to the user   const blob   new Blob        type  contentType    const blobUrl   URL createObjectURL blob    window location   blobUrl    I haven t been been able to figure out how to create the BLOB   In some cases I am able to avoid this by using a data  URL instead   const dataUrl    data   contentType  base64   b64Data     window location   dataUrl    However  in most cases the data  URLs are prohibitively large     How can I decode a Base64 string to a BLOB object in JavaScript

User · Answer

For all browser support  especially on Android  perhaps you can add this   try      blob   new Blob byteArrays   type   contentType      catch e          TypeError old Google Chrome and Firefox     window BlobBuilder   window BlobBuilder                             window WebKitBlobBuilder                             window MozBlobBuilder                             window MSBlobBuilder      if e name     TypeError   amp  amp  window BlobBuilder           var bb   new BlobBuilder            bb append byteArrays           blob   bb getBlob contentType             else if e name     InvalidStateError               InvalidStateError  tested on FF13 WinXP          blob   new Blob byteArrays   type   contentType              else             We re screwed  blob constructor unsupported entirely

User · Answer

The method with fetch is the best solution  but if anyone needs to use a method without fetch then here it is  as the ones mentioned previously didn t work for me   function makeblob dataURL        const BASE64 MARKER     base64        const parts   dataURL split BASE64 MARKER       const contentType   parts 0  split      1       const raw   window atob parts 1        const rawLength   raw length      const uInt8Array   new Uint8Array rawLength        for  let i   0  i  lt  rawLength    i            uInt8Array i    raw charCodeAt i              return new Blob  uInt8Array     type  contentType

User · Answer

Here is a more minimal method without any dependencies or libraries  It requires the new fetch API   Can I use it    x000D   x000D  var url    data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4  8 w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg     fetch url   then res   gt  res blob     then console log  x000D   x000D   x000D   With this method you can also easily get a ReadableStream  ArrayBuffer  text  and JSON   fyi this also works with node-fetch in Node  As a function  const b64toBlob    base64  type    application octet-stream     gt     fetch  data   type  base64   base64    then res   gt  res blob      I did a simple performance test towards Jeremy s ES6 sync version  The sync version will block UI for a while  keeping the devtool open can slow the fetch performance  x000D   x000D  document body innerHTML      lt input autofocus placeholder  try writing  gt      get some dummy gradient image var img function   var a document createElement  canvas   b a getContext  2d   c b createLinearGradient 0 0 1500 1500  a width a height 3000 c addColorStop 0  red   c addColorStop 1  blue   b fillStyle c b fillRect 0 0 a width a height  return a toDataURL         async function perf          const blob   await fetch img  then res   gt  res blob         turn it to a dataURI   const url   img   const b64Data   url split      1        Jeremy Banks solution   const b64toBlob    b64Data  contentType       sliceSize 512    gt        const byteCharacters   atob b64Data       const byteArrays                for  let offset   0  offset  lt  byteCharacters length  offset    sliceSize          const slice   byteCharacters slice offset  offset   sliceSize                const byteNumbers   new Array slice length         for  let i   0  i  lt  slice length  i              byteNumbers i    slice charCodeAt i                        const byteArray   new Uint8Array byteNumbers                byteArrays push byteArray                  const blob   new Blob byteArrays   type  contentType        return blob            bench blocking method   let i   500   console time  blocking b64     while  i--        await b64toBlob b64Data        console timeEnd  blocking b64           bench non blocking   i   500       so that the function is not reconstructed each time   const toBlob   res   gt  res blob     console time  fetch     while  i--        await fetch url  then toBlob        console timeEnd  fetch     console log  done      perf   x000D   x000D   x000D

User · Answer

I noticed that Internet Explorer 11 gets incredibly slow when slicing the data like Jeremy suggested  This is true for Chrome  but Internet nbsp Explorer seems to have a problem when passing the sliced data to the Blob-Constructor  On my machine  passing 5 nbsp MB of data makes Internet nbsp Explorer crash and memory consumption is going through the roof  Chrome creates the blob in no time   Run this code for a comparison   var byteArrays           megaBytes   2      byteArray   new Uint8Array megaBytes 1024 1024       block      blobSlowOnIE  blobFastOnIE      i   for  i   0  i  lt   megaBytes 1024   i          block   new Uint8Array 1024       byteArrays push block        debugger   console profile  No Slices    blobSlowOnIE   new Blob byteArrays    type   text plain     console profileEnd     console profile  Slices    blobFastOnIE   new Blob  byteArray     type   text plain     console profileEnd      So I decided to include both methods described by Jeremy in one function  Credits go to him for this   function base64toBlob base64Data  contentType  sliceSize         var byteCharacters          byteArray          byteNumbers          blobData          blob       contentType   contentType             byteCharacters   atob base64Data           Get BLOB data sliced or not     blobData   sliceSize   getBlobDataSliced     getBlobDataAtOnce         blob   new Blob blobData    type  contentType          return blob                  Get BLOB data in one slice           gt  Fast in Internet Explorer on new Blob                  function getBlobDataAtOnce             byteNumbers   new Array byteCharacters length            for  var i   0  i  lt  byteCharacters length  i                  byteNumbers i    byteCharacters charCodeAt i                      byteArray   new Uint8Array byteNumbers            return  byteArray                        Get BLOB data in multiple slices           gt  Slow in Internet Explorer on new Blob                  function getBlobDataSliced              var slice              byteArrays                for  var offset   0  offset  lt  byteCharacters length  offset    sliceSize                slice   byteCharacters slice offset  offset   sliceSize                byteNumbers   new Array slice length                for  var i   0  i  lt  slice length  i                      byteNumbers i    slice charCodeAt i                              byteArray   new Uint8Array byteNumbers                   Add slice             byteArrays push byteArray                      return byteArrays

User · Answer

If you can stand adding one dependency to your project there s the great blob-util npm package that provides a handy base64StringToBlob function  Once added to your package json you can use it like this   import   base64StringToBlob   from  blob-util    const contentType    image png   const b64Data    iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4  8 w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg      const blob   base64StringToBlob b64Data  contentType       Do whatever you need with your blob

User · Answer

The atob function will decode a Base64-encoded string into a new string with a character for each byte of the binary data   const byteCharacters   atob b64Data     Each character s code point  charCode  will be the value of the byte  We can create an array of byte values by applying this using the  charCodeAt method for each character in the string   const byteNumbers   new Array byteCharacters length   for  let i   0  i  lt  byteCharacters length  i          byteNumbers i    byteCharacters charCodeAt i       You can convert this array of byte values into a real typed byte array by passing it to the Uint8Array constructor   const byteArray   new Uint8Array byteNumbers     This in turn can be converted to a BLOB by wrapping it in an array and passing it to the Blob constructor   const blob   new Blob  byteArray    type  contentType      The code above works  However the performance can be improved a little by processing the byteCharacters in smaller slices  rather than all at once  In my rough testing 512 bytes seems to be a good slice size  This gives us the following function   const b64toBlob    b64Data  contentType     sliceSize 512    gt      const byteCharacters   atob b64Data     const byteArrays          for  let offset   0  offset  lt  byteCharacters length  offset    sliceSize        const slice   byteCharacters slice offset  offset   sliceSize        const byteNumbers   new Array slice length       for  let i   0  i  lt  slice length  i            byteNumbers i    slice charCodeAt i              const byteArray   new Uint8Array byteNumbers       byteArrays push byteArray          const blob   new Blob byteArrays   type  contentType      return blob      const blob   b64toBlob b64Data  contentType   const blobUrl   URL createObjectURL blob    window location   blobUrl    Full Example    x000D   x000D  const b64toBlob    b64Data  contentType     sliceSize 512    gt    x000D    const byteCharacters   atob b64Data   x000D    const byteArrays       x000D   x000D    for  let offset   0  offset  lt  byteCharacters length  offset    sliceSize    x000D      const slice   byteCharacters slice offset  offset   sliceSize   x000D   x000D      const byteNumbers   new Array slice length   x000D      for  let i   0  i  lt  slice length  i      x000D        byteNumbers i    slice charCodeAt i   x000D        x000D   x000D      const byteArray   new Uint8Array byteNumbers   x000D      byteArrays push byteArray   x000D      x000D   x000D    const blob   new Blob byteArrays   type  contentType    x000D    return blob  x000D    x000D   x000D  const contentType    image png   x000D  const b64Data    iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4  8 w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg     x000D   x000D  const blob   b64toBlob b64Data  contentType   x000D  const blobUrl   URL createObjectURL blob   x000D   x000D  const img   document createElement  img    x000D  img src   blobUrl  x000D  document body appendChild img   x000D   x000D   x000D

User · Answer

For all copy-paste lovers out there like me  here is a cooked download function which works on Chrome  Firefox and Edge   window saveFile   function  bytesBase64  mimeType  fileName    var fileUrl    data     mimeType     base64     bytesBase64  fetch fileUrl       then response   gt  response blob         then blob   gt            var link   window document createElement  a            link href   window URL createObjectURL blob    type  mimeType             link download   fileName          document body appendChild link           link click            document body removeChild link

User · Answer

See this example  https   jsfiddle net pqhdce2L     x000D   x000D  function b64toBlob b64Data  contentType  sliceSize    x000D    contentType   contentType        x000D    sliceSize   sliceSize    512  x000D   x000D    var byteCharacters   atob b64Data   x000D    var byteArrays       x000D   x000D    for  var offset   0  offset  lt  byteCharacters length  offset    sliceSize    x000D      var slice   byteCharacters slice offset  offset   sliceSize   x000D   x000D      var byteNumbers   new Array slice length   x000D      for  var i   0  i  lt  slice length  i      x000D        byteNumbers i    slice charCodeAt i   x000D        x000D   x000D      var byteArray   new Uint8Array byteNumbers   x000D   x000D      byteArrays push byteArray   x000D      x000D       x000D    var blob   new Blob byteArrays   type  contentType    x000D    return blob  x000D    x000D   x000D   x000D  var contentType    image png   x000D  var b64Data   Your Base64 encode  x000D   x000D  var blob   b64toBlob b64Data  contentType   x000D  var blobUrl   URL createObjectURL blob   x000D   x000D  var img   document createElement  img    x000D  img src   blobUrl  x000D  document body appendChild img   x000D   x000D   x000D

User · Answer

For image data  I find it simpler to use canvas toBlob  asynchronous   function b64toBlob b64  onsuccess  onerror        var img   new Image         img onerror   onerror       img onload   function onload             var canvas   document createElement  canvas            canvas width   img width          canvas height   img height           var ctx   canvas getContext  2d            ctx drawImage img  0  0  canvas width  canvas height            canvas toBlob onsuccess               img src   b64     var base64Data    data image jpg base64  9j 4AAQSkZJRgABAQA      b64toBlob base64Data      function blob            var url   window URL createObjectURL blob              do something with url        function error               handle error

User · Answer

Optimized  but less readable  implementation   function base64toBlob base64Data  contentType        contentType   contentType            var sliceSize   1024      var byteCharacters   atob base64Data       var bytesLength   byteCharacters length      var slicesCount   Math ceil bytesLength   sliceSize       var byteArrays   new Array slicesCount        for  var sliceIndex   0  sliceIndex  lt  slicesCount    sliceIndex            var begin   sliceIndex   sliceSize          var end   Math min begin   sliceSize  bytesLength            var bytes   new Array end - begin           for  var offset   begin  i   0  offset  lt  end    i    offset                bytes i    byteCharacters offset  charCodeAt 0                     byteArrays sliceIndex    new Uint8Array bytes             return new Blob byteArrays    type  contentType

User · Answer

I m posting a more declarative way of sync Base64 converting  While async fetch   blob   is very neat and I like this solution a lot  it doesn t work on Internet nbsp Explorer nbsp 11  and probably Edge - I haven t tested this one   even with the polyfill - take a look at my comment to Endless  post for more details   const blobPdfFromBase64String   base64String   gt       const byteArray   Uint8Array from       atob base64String          split             map char   gt  char charCodeAt 0           return new Blob  byteArray     type   application pdf           Bonus  If you want to print it you could do something like   const isIE11      window navigator  amp  amp  window navigator msSaveOrOpenBlob      Or however you want to check it const printPDF   blob   gt       try        isIE11          window navigator msSaveOrOpenBlob blob   documents pdf            printJS URL createObjectURL blob       http   printjs crabbly com       catch  e         throw PDFError            Bonus x 2 - Opening a BLOB file in new tab for Internet nbsp Explorer nbsp 11  If you re able to do some preprocessing of the Base64 string on the server you could expose it under some URL and use the link in printJS

User · Answer

Following is my TypeScript code which can be converted easily into JavaScript and you can use        Convert BASE64 to BLOB     param base64Image Pass Base64 image data to convert into the BLOB     private convertBase64ToBlob base64Image  string         Split into two parts   const parts   base64Image split   base64           Hold the content type   const imageType   parts 0  split      1         Decode Base64 string   const decodedData   window atob parts 1          Create UNIT8ARRAY of size same as row data length   const uInt8Array   new Uint8Array decodedData length         Insert all character code into uInt8Array   for  let i   0  i  lt  decodedData length    i        uInt8Array i    decodedData charCodeAt i             Return BLOB image after conversion   return new Blob  uInt8Array     type  imageType

[javascript] Creating a BLOB from a Base64 string in JavaScript

Examples related to javascript

Examples related to base64