Convert blob URL to normal URL

Question

My page generates a URL like this   blob http 3A  localhost 3A8383 568233a1-8b13-48b3-84d5-cca045ae384f  How can I convert it to a normal address   I m using it as an  lt img gt  s src attribute

User · Answer

As the previous answer have said  there is no way to decode it back to url  even when you try to see it from the chrome devtools panel  the url may be still encoded as blob    However  it s possible to get the data  another way to obtain the data is to put it into an anchor and directly download it    lt a href  blob http   example com xxxx-xxxx-xxxx-xxxx  download gt download lt  a gt    Insert this to the page containing blob url and click the button  you get the content   Another way is to intercept the ajax call via a proxy server  then you could view the true image url

User · Answer

A URL that was created from a JavaScript Blob can not be converted to a  normal  URL   A blob  URL does not refer to data the exists on the server  it refers to data that your browser currently has in memory  for the current page  It will not be available on other pages  it will not be available in other browsers  and it will not be available from other computers   Therefore it does not make sense  in general  to convert a Blob URL to a  normal  URL  If you wanted an ordinary URL  you would have to send the data from the browser to a server and have the server make it available like an ordinary file   It is possible convert a blob  URL into a data  URL  at least in Chrome  You can use an AJAX request to  fetch  the data from the blob  URL  even though it s really just pulling it out of your browser s memory  not making an HTTP request    Here s an example    x000D   x000D  var blob   new Blob   Hello  world       type   text plain      x000D  var blobUrl   URL createObjectURL blob   x000D   x000D  var xhr   new XMLHttpRequest  x000D  xhr responseType    blob   x000D   x000D  xhr onload   function     x000D     var recoveredBlob   xhr response  x000D   x000D     var reader   new FileReader  x000D   x000D     reader onload   function     x000D       var blobAsDataUrl   reader result  x000D       window location   blobAsDataUrl  x000D        x000D   x000D     reader readAsDataURL recoveredBlob   x000D     x000D   x000D  xhr open  GET   blobUrl   x000D  xhr send    x000D   x000D   x000D    data  URLs are probably not what you mean by  normal  and can be problematically large  However they do work like normal URLs in that they can be shared  they re not specific to the current browser or session

User · Answer

another way to create a data url from blob url may be using canvas   var canvas   document createElement  canvas   var context   canvas getContext  2d   context drawImage img  0  0     i assume that img src is your blob url var dataurl   canvas toDataURL  your prefer type   your prefer quality    as what i saw in mdn  canvas toDataURL is supported well by browsers   except ie lt 9  always ie lt 9

User · Answer

Found this answer here and wanted to reference it as it appear much cleaner than the accepted answer  function blobToDataURL blob  callback      var fileReader   new FileReader      fileReader onload   function e   callback e target result      fileReader readAsDataURL blob

User · Answer

For those who came here looking for a way to download a blob url video   audio  this answer worked for me  In short  you would need to find an   m3u8 file on the desired web page through Chrome -  Network tab and paste it into a VLC player    Another guide shows you how to save a stream with the VLC Player

[javascript] Convert blob URL to normal URL

Examples related to javascript

Examples related to url

Examples related to blob