Question

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

我将其用作<img>的{{1}}属性。

Answer 1

从JavaScript Blob创建的网址无法转换为“普通”网址。

blob:网址不是指服务器上存在的数据，它指的是您的浏览器当前在内存中为当前页面提供的数据。它不会在其他页面上提供，它将无法在其他浏览器中使用，也不会从其他计算机上获得。

因此，将Blob网址转换为“普通”网址通常没有意义。如果你想要一个普通的URL，你必须将数据从浏览器发送到服务器，让服务器像普通文件一样使用它。

可以将blob:网址转换为data:网址，至少在Chrome中是这样。您可以使用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一样，因为它们可以共享;它们并不特定于当前的浏览器或会话。

Answer 2

从blob url创建数据网址的另一种方法可能是使用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得到了浏览器的支持。（除了＆lt; 9，总是如此＆lt; 9）

Answer 3

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

另一本指南介绍了如何save a stream with the VLC Player。

Answer 4

找到了这个答案here，并希望引用它，因为它看起来比接受的答案更干净：

function blobToDataURL(blob, callback) {
  var fileReader = new FileReader();
  fileReader.onload = function(e) {callback(e.target.result);}
  fileReader.readAsDataURL(blob);
}

Answer 5

我参加聚会很晚了。

如果您想下载内容，现在只需使用 fetch

fetch(blobURL)
  .then(res => res.blob())
  .then(blob => /*do what you want with the blob here*/)

Answer 6

正如之前的回答所说，没有办法将其解码回url，即使你试图从chrome devtools面板中看到它，url仍然可以编码为blob。

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

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

将其插入包含blob网址的页面，然后点击按钮，即可获得内容。

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

将blob URL转换为普通URL

6 个答案: