将Blob URL转换为普通URL

我的页面会生成这样的URL："blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"如何将其转换为普通地址？

我将其用作<img>的src属性。

从JavaScript创建的URL Blob不能转换为“普通” URL。

一个blob:URL并不是指在服务器上存在的数据，它是指数据您的浏览器目前在存储器中，当前页面。它在其他页面上将不可用，在其他浏览器中将不可用，并且在其他计算机上将不可用。

因此，通常来说，将BlobURL 转换为“正常” URL 是没有意义的。如果要使用普通URL，则必须将数据从浏览器发送到服务器，并使服务器像普通文件一样使它可用。

至少在Chrome中，可以将blob:网址转换为data:网址。您可以使用AJAX请求从blob:URL中“获取”数据（即使实际上只是将其从浏览器的内存中拉出，而不是发出HTTP请求）。

这是一个例子：

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:URL可能不是您所说的“正常”，它可能会很大。但是，它们的确像普通URL一样工作，因为它们可以共享。它们不特定于当前的浏览器或会话。

从Blob网址创建数据网址的另一种方法可能是使用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)

如我在mdn中看到的那样，浏览器很好地支持canvas.toDataURL。（除了ie <9，总是ie <9）

对于那些来这里寻找下载Blob网址视频/音频的人来说，这个答案对我有用。简而言之，您需要通过Chrome- > 网络标签在所需的网页上找到* .m3u8文件，并将其粘贴到VLC播放器中。

另一指南介绍了如何使用VLC Player保存流。

正如前面的回答所说，即使您尝试从chrome devtools面板中看到它，也无法将其解码回url，但该url仍可能被编码为blob。

但是，可以获取数据，获取数据的另一种方法是将其放入锚点并直接下载。

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

将其插入包含Blob网址的页面，然后单击按钮，您将获得内容。

另一种方法是通过代理服务器拦截ajax调用，然后您可以查看真实的图像URL。