Using JavaScript to display a Blob

Question

I am retrieving a Blob image from a database  and I d like to be able to view that image using JavaScript  The following code produces a broken image icon on the page   var image   document createElement  image        image src    data image bmp base64   Base64 encode blob       document body appendChild image     Here is a jsFiddle containing all the code required  including the blob  The completed code should properly display an image

User · Answer

In your example  you should createElement  img     In your link  base64blob    Base64 encode blob    This works  as long as your data is valid http   jsfiddle net SXFwP   I didn t have any BMP images so I had to use PNG

User · Answer

I guess you had an error in the inline code of your image  Try this     x000D   x000D  var image   document createElement  img    x000D       x000D  image src  data image gif base64 R0lGODlhDwAPAKECAAAAzMzM     wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw     x000D       x000D  image width 100  x000D  image height 100  x000D  image alt  here should be some image   x000D       x000D  document body appendChild image   x000D   x000D   x000D    Helpful link  http   dean edwards name my base64-ie html

User · Answer

If you want to use fetch instead   var myImage   document querySelector  img     fetch  flowers jpg   then function response      return response blob       then function myBlob      var objectURL   URL createObjectURL myBlob     myImage src   objectURL        Source   https   developer mozilla org en-US docs Web API Fetch API Using Fetch

User · Answer

You can also get BLOB object directly from XMLHttpRequest  Setting responseType to blob makes the trick  Here is my code   var xhr   new XMLHttpRequest    xhr open  GET    http   localhost image jpg    xhr responseType    blob   xhr onload   response  xhr send      And the response function looks like this   function response e       var urlCreator   window URL    window webkitURL     var imageUrl   urlCreator createObjectURL this response      document querySelector   image   src   imageUrl      We just have to make an empty image element in HTML    lt img id  image   gt

User · Answer

In the fiddle your blob isn t a blob  it s a string representation of hexadecimal data  Try this on a blob and your done  var image   document createElement  img    let reader new FileReader   reader addEventListener  loadend      gt     let contents reader result   image src   contents   document body appendChild image      if blob instanceof Blob  reader readAsDataURL blob    readAsDataURL give you a base64 encoded image ready for you image element    source  src

User · Answer

The problem was that I had hexadecimal data that needed to be converted to binary before being base64encoded   in PHP   base64 encode pack  H     subvalue

User · Answer

You can convert your string into a Uint8Array to get the raw data   Then create a Blob for that data and pass to URL createObjectURL blob  to convert the Blob into a URL that you pass to img src   var data    424D5E070000000000003E00000028000000EF          Convert the string to bytes var bytes   new Uint8Array data length   2    for  var i   0  i  lt  data length  i    2        bytes i   2    parseInt data substring i  i   2      base      16         Make a Blob from the bytes var blob   new Blob  bytes    type   image bmp         Use createObjectURL to make a URL for the blob var image   new Image    image src   URL createObjectURL blob   document body appendChild image     You can try the complete example at  http   jsfiddle net nj82y73d

[javascript] Using JavaScript to display a Blob

Examples related to javascript

Examples related to image

Examples related to base64

Examples related to blob