将 blob URL 转换为普通 URL

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

我使用它作为 <img>的 src属性。

313321 次浏览
小开
最佳答案

由 JavaScriptBlob创建的 URL 无法转换为“普通”URL。

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

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

至少在 Chrome 中，可以将 blob: URL 转换为 data: URL。您可以使用 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 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 中看到的那样，webas.toDataURL 在浏览器中得到了很好的支持(除了 ie < 9之外，总是 ie < 9)

小开

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

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

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

将其插入到包含 blob URL 的页面中，然后单击按钮，就可以获得内容。

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

小开

对于那些来这里寻找一种方式下载一个 blob 网址视频/音频，这个答案起作用了为我。简而言之，你需要找到一个 * 。通过 铬合金-> 网络标签将 m3u8文件粘贴到所需的网页上。

另一个指南告诉你如何 用 VLC 播放器保存流。

更新:

另一种从 blob URL 下载视频的方法是使用大规模下载器并将文件连接在一起。

下载影片部分

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

enter image description here

  1. 重新载入网页
  2. Filter.m3u8文件

enter image description here

  1. 查看所有筛选过的文件，找到“ . ts”文件的播放列表:

enter image description here

  1. 你得想办法提取那些链接。要么手动下载和编辑文件，要么使用任何其他方法。如你所见，这些链接非常相似，唯一不同的是视频的序列号: s-0-v1-a1。T’,’s-1-v1-a1。等等。

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

    Https://some-website.net/del/8cf.m3u8/s-1-v1-a1.ts

    Https://some-website.net/del/8cf.m3u8/s-2-v1-a1.ts

等等，直到。M3u8播放列表文件。这些。这些文件其实是你的视频。你需要把它们全部下载下来。

  1. 对于批量下载，我更喜欢使用 Chrome 的简单大量下载扩展(https://chrome.google.com/webstore/detail/simple-mass-downloader/abdkkegmcbiomijcbdaodaflgehfffed)

  2. 如果你选择了简单大量下载，你需要:

    选择一个模式 URL

enter image description here

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

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

enter image description here

C.下一个操作可能会要求您为下载的每个视频提供目标文件夹。因此，强烈建议在 Chrome 设置中指定默认下载文件夹，并在 Chrome 设置中禁用“选择目的地”选项。这样可以节省你很多时间！此外，您可能还需要指定这些文件将放到的文件夹:

enter image description here

点击 Select All 复选框从下载列表中选择所有文件。

enter image description here

C2.单击 SMD 扩展窗口右下角的“下载”按钮。它会带你到下一个标签开始下载

enter image description here

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

enter image description here

够了！只需等待，直到所有文件下载，你可以通过 VLC 播放器或任何其他球员，支持。其格式。然而，如果你想有一个视频，而不是那些你已经下载，你需要加入所有这些迷你视频在一起

视频连接部分

因为我在 Mac 上工作，所以我不知道你在 Windows 上会怎么做。如果你是 Windows 用户，你想合并的视频，随时谷歌的 Windows 解决方案。接下来的步骤只适用于 Mac。

  1. 打开要保存新视频的文件夹中的终端
  2. 类型: cat，按 space
  3. 打开下载 .ts视频的文件夹。选择您想要加入的所有 .ts视频(使用鼠标或 cmd+A)
  4. 将它们拖放到终端
  5. 按 space
  6. 按 >
  7. 按 Space
  8. 输入新影片的名称，例如 my_new_video.ts。请注意，格式必须与原来的视频相同，否则将需要很长时间转换，甚至可能会失败！
  9. 按 Enter。等待终端完成加入过程，并享受观看您的视频！
小开

找到这个答案 给你，并想参考它，因为它似乎比公认的答案干净得多:

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

我来晚了。

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

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

解决办法是:

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

提交答案