Javascript 将 Blob URL 转换为普通 URL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14952052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert blob URL to normal URL
提问by Jacob
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?
我的页面生成这样的 URL："blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"如何将其转换为普通地址？
I'm using it as an <img>'s srcattribute.
我将它用作<img>'ssrc属性。
回答by Facebook Staff are Complicit
A URL that was created from a JavaScript Blobcan not be converted to a "normal" URL.
从 JavaScript 创建的 URLBlob无法转换为“普通” 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.
一个blob:URL并不是指在服务器上存在的数据，它是指数据您的浏览器目前在存储器中，当前页面。它在其他页面上不可用，在其他浏览器中不可用，在其他计算机上也不可用。
Therefore it does not make sense, in general, to convert a BlobURL 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.
因此，通常将BlobURL转换为“普通”URL是没有意义的。如果您想要一个普通的 URL，您必须将数据从浏览器发送到服务器，并让服务器使其像普通文件一样可用。
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).
至少在 Chrome 中，可以将blob:URL 转换为data:URL。您可以使用 AJAX 请求从blob:URL 中“获取”数据（即使它实际上只是将其从浏览器的内存中拉出，而不是发出 HTTP 请求）。
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.
data:URL 可能不是您所说的“正常”，并且可能很大。然而，它们确实像普通 URL 一样工作，因为它们可以共享；它们并非特定于当前浏览器或会话。
回答by Leooonard
another way to create a data url from blob url may be using canvas.
从 blob url 创建数据 url 的另一种方法可能是使用画布。
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)
正如我在 mdn 中看到的那样，浏览器支持 canvas.toDataURL。（除了ie<9，总是ie<9）
回答by Gasper J.
For those who came here looking for a way to download a blob url video / audio, this answer workedfor me. In short, you would need to find an *.m3u8 file on the desired web page through Chrome-> Network taband paste it into a VLC player.
对于那些来到这里寻找下载 blob url 视频/音频的方法的人来说，这个答案对我有用。简而言之，您需要通过Chrome-> Network 选项卡在所需网页上找到一个 *.m3u8 文件并将其粘贴到VLC 播放器中。
Another guide shows you how to save a stream with the VLC Player.
另一个指南向您展示了如何使用 VLC 播放器保存流。
回答by ospider
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.
正如之前的答案所说，无法将其解码回 url，即使您尝试从 chrome devtools 面板查看它，该 url 可能仍被编码为 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.
将此插入包含 blob url 的页面并单击按钮，您将获得内容。
Another way is to intercept the ajax call via a proxy server, then you could view the true image url.
另一种方式是通过代理服务器拦截ajax调用，然后就可以查看到真实的图片url了。
