Convert blob URL to normal URL

by

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:

var blob = new Blob(["Hello, world!"], { type: 'text/plain' });
var blobUrl = URL.createObjectURL(blob);

var xhr = new XMLHttpRequest;
xhr.responseType="blob";

xhr.onload = function() {
   var recoveredBlob = xhr.response;

   var reader = new FileReader;

   reader.onload = function() {
     var blobAsDataUrl = reader.result;
     window.location = blobAsDataUrl;
   };

   reader.readAsDataURL(recoveredBlob);
};

xhr.open('GET', blobUrl);
xhr.send();

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.

More Related Contents:

  1. How do I parse a URL into hostname and path in javascript?
  2. Refresh image with a new one at the same url
  3. JavaScript blob filename without link
  4. Detect URLs in text with JavaScript
  5. JavaScript – Get Portion of URL Path
  6. Using JavaScript to display a Blob
  7. Using the GET parameter of a URL in JavaScript [duplicate]
  8. Saving binary data as file using JavaScript from a browser
  9. How to check if the URL contains a given string?
  10. Can I set the filename of a PDF object displayed in Chrome?
  11. How to go from Blob to ArrayBuffer
  12. Go to local URL with Javascript
  13. Change URL and redirect using jQuery
  14. How to escape a JSON string to have it in a URL?
  15. How to replace url parameter with javascript/jquery?
  16. What are the differences between history.pushState & location.hash? [closed]
  17. RegEx to match stuff between parentheses
  18. Record 5 seconds segments of audio using MediaRecorder and then upload to the server
  19. Save to Local File from Blob
  20. Remove fragment in URL with JavaScript w/out causing page reload
  21. How to download an image with Python 3/Selenium if the URL begins with “blob:”?
  22. Appending Blob data
  23. Javascript-Setting background image of a DIV via a function and function parameter
  24. get url after “#” in express.js middleware request
  25. Make a JavaScript array from URL
  26. Why is “javascript:” pseudo-protocol stripped from URL bar when pasted?
  27. jQuery add class based on page URL
  28. Extract keyword from Google search in Javascript
  29. Blob download is not working in IE
  30. How could I change window’s location without reloading and # hack?

Leave a Comment