Convert blob URL to normal URL

convert string to blob javascript
get data from blob url
convert blob to image
sample image blob data
blob url converter online
image url to image blob
blob url download
arraybuffer to blob

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 <img>'s src attribute.

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();

Convert blob URL to normal URL, My page generates a URL like this: "blob:http%3A//localhost%3A8383/568233a1​-8b13-48b3-84d5-cca045ae384f" How can I convert it to a  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

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<9, always ie<9)

How to find the real URL of a blob URL from a HTML/JavaScript file , 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  @ bhh1988 Это очень интересная находка. Я не уверен, что там происходит. Если я попытаюсь извлечь URL-адрес src blob с помощью XMLHttpRequest, как описано в этом сообщении, контент не будет возвращен.

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?, var blob = new Blob(["Hello, world!"], { type: 'text/plain' }); var blobUrl = URL.​createObjectURL(blob); var xhr = new XMLHttpRequest; xhr.responseType = '​blob';  I&#39;m trying to convert base64 to normal image url using angular 4. I found a solution ` dataURItoBlob(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string l

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.

<a href="blob:http://example.com/xxxx-xxxx-xxxx-xxxx" download>download</a>

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.

What is a blob URL and why it is used?, source for things like images, download links for binary data and so forth. For example, you can not hand an Image object raw byte-data as it would not know what to do with it. Convert a Readable Stream to a Blob URL. Contribute to feross/stream-to-blob-url development by creating an account on GitHub.

How do we download a blob url video, with blob: as its scheme, followed by an opaque string uniquely identifying the object in the browser. The term URL encoding is a bit inexact because the encoding procedure is not limited to URLs (Uniform Resource Locators), but can also be applied to any other URIs (Uniform Resource Identifiers) such as URNs (Uniform Resource Names). Therefore, the term percent-encoding should be preferred.

Using URL.createObjectURL() - Chris Ng, object for a file on the user's file system, see the File documentation. This method will get the video and its audio AS SEPARATE FILES. The downloaded video will have no sound, but you will be able to download it's audio file and connect it to the video in some video editing program if you need to.

Blob, A Blob can be easily used as an URL for <a> , <img> or other tags, to show its contents. createObjectURL is to convert a Blob into a base64-encoded string. We can use such urls everywhere, on par with “regular” urls. How do we download a blob url video (8) Find the playlist/manifest with the developer tools network tab. There is always one, as that's how it works. It might have a m3u8 extension that you can type into the Filter. Give it to the youtube-dl tool.

Comments
  • even after decoding the URL, it's still a localhost link. Find out its public link instead. (which CDN are you using?)
  • I am wishing to use javascript.
  • Use the stackvoverflow link .. and W3C Your real problem will be how to make it independent of environment you deploy your code in
  • Is there a way to find the public URL from the blob adress. Thhis is the only value I have.
  • Also superuser.com/q/948738/78897
  • If blob urls don't point to server data, then how come Youtube videos' src url look like: src="blob:https%3A//www.youtube.com/44f26667-03f1-4978-9eed-af0cbf11dd67" (in Chrome)
  • @bhh1988 That's a very interesting find. I'm not sure what's going on there. If I try to retrieve their src blob URL using an XMLHttpRequest, as described in this post, no content is returned. My guess is that either (a) they generated any empty Blob URL to use as a placeholder while feeding in data from another source or (b) the Blob somehow acts as a proxy for encrypted data (via HTML5 Encrypted Media Extensions). However, I'm not sure how either of these could actually be done in practice.
  • @bhh1988 It looks like the media source extensions spec allows blob URLs to be created for media streams being managed by JavaScript. These do not correspond to static data like the blob URLs discussed in this post, hence the difference in behavior, but they still refer to local information, not directly to data on a server.
  • Hmm, sounds right. It's confusing because the url looks real and intentful, but if it's just a placeholder it shouldn't matter what the value of src is.
  • I get a Not allowed to navigate top frame to data URL: data:text/plain;base64,... error. I get the data, but the window.location it is not allowed...
  • Note that this of course applies only for image data, and some metadata might be lost!