javascript - 将 blob URL 转换为普通 URL

Question

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

我将它用作<img>'ssrc属性。

score 197 · Accepted Answer

从 JavaScript 创建的 URLBlob不能转换为“正常” URL。

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

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

至少在 Chrome 中，可以将blob:URL 转换为URL。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 一样工作，因为它们可以共享；它们并不特定于当前浏览器或会话。

score 16 · Accepted Answer

从 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)

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

score 11 · Accepted Answer

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

另一个指南向您展示了如何使用 VLC Player 保存流。

更新：

从 blob url 下载视频的另一种方法是使用批量下载器并将文件连接在一起。

下载视频部分

在 chrome 开发工具中打开网络选项卡

重新加载网页
过滤 .m3u8 文件

查看所有过滤的文件并找到“.ts”文件的播放列表。它应该看起来像这样：

您需要以某种方式提取这些链接。手动下载和编辑文件或使用您喜欢的任何其他方法。如您所见，这些链接非常相似，唯一不同的是视频的序列号：'s - 0 -v1-a1.ts'、's - 1 -v1-a1.ts'等。

https://some-website.net/del/8cf.m3u8/s-0-v1-a1.ts

https://some-website.net/del/8cf.m3u8/s-1-v1-a1.ts  </p>
https://some-website.net/del/8cf.m3u8/s-2-v1-a1.ts </a>

依此类推，直到 .m3u8 播放列表文件中的最后一个链接。这些 .ts 文件实际上是您的视频。您需要下载所有这些。

对于批量下载，我更喜欢使用适用于 Chrome 的 Simple Mass Downloader 扩展程序（https://chrome.google.com/webstore/detail/simple-mass-downloader/abdkkegmcbiomijcbdaodaflgehfffed）
如果您选择使用 Simple Mass Downloader，您需要：

一种。选择模式 URL

湾。在地址字段中输入您的链接，只需进行一次修改：为每个下一个视频更改的链接部分需要替换为方括号 [0:400] 中的模式，其中 0 是第一个文件名，400 是最后一个。所以你的链接应该看起来像这样https://some-website.net/del/8cf.m3u8/s-[0:400]-v1-a1.ts。

然后点击 Import 按钮将这些链接添加到 Mass Downloader 的下载列表中。

C。下一个操作可能会询问您下载的每个视频的目标文件夹。因此强烈建议在 Chrome 设置中指定默认下载文件夹，并在 Chrome 设置中禁用选择目标选项。这将为您节省大量时间！此外，您可能希望指定这些文件所在的文件夹：

c1。单击全选复选框以从下载列表中选择所有文件。

c2。单击 SMD 扩展窗口右下角的下载按钮。它将带您到下一个选项卡开始下载

c3。点击开始选择。这会将所有视频自动下载到下载文件夹中。

这就对了！只需等到所有文件都下载完毕，您就可以通过 VLC 播放器或任何其他支持 .ts 格式的播放器观看它们。但是，如果您想拥有一个视频而不是下载的视频，则需要将所有这些迷你视频连接在一起

加入视频部分

由于我在 Mac 上工作，我不知道您将如何在 Windows 上执行此操作。如果您是 Windows 用户并且想要合并视频，请随时使用谷歌搜索 Windows 解决方案。后续步骤仅适用于 Mac。

在要保存新视频的文件夹中打开终端
类型：cat然后点击space
打开您下载.ts视频的文件夹。选择.ts您要加入的所有视频（使用鼠标或cmd+A）
将它们拖放到终端中
打space
打>
打Space
输入新视频的名称，例如my_new_video.ts。请注意，格式必须与原视频格式一致，否则转换时间较长，甚至可能会失败！
打Enter。等待终端完成加入过程并享受观看您的视频！

score 3 · Accepted Answer

在这里找到了这个答案并想引用它，因为它看起来比接受的答案要干净得多：

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

score 0 · Accepted Answer

我参加晚会很晚了。

如果您想下载内容，您fetch现在可以简单地使用

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

score 0 · Accepted Answer

这里的解决方案：

        let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
        let videoURL = window.URL.createObjectURL(blob);
        const blobF = await fetch(videoURL).then(res => res.blob())

score -2 · Accepted Answer

正如前面的答案所说，没有办法将其解码回 url，即使您尝试从 chrome devtools 面板查看它，url 可能仍被编码为 blob。

但是，获取数据是可以的，另一种获取数据的方法是放到anchor中直接下载。

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

将此插入包含 blob url 的页面并单击按钮，您将获得内容。

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

javascript - 将 blob URL 转换为普通 URL

7 回答 7

Related

Reference