我在使用 blob URL 时遇到了很多问题。
我在 YouTube 上搜索视频标签的 src
,发现视频 src
类似于:
src="blob:https://crap.crap"
我打开了视频 src
中的 blob URL,它给出了错误。我无法打开该链接,但它正在使用 src
标记。这怎么可能?
要求:
什么是 blob URL?
为什么使用它?
我可以在服务器上创建自己的 blob URL 吗?
如果您有任何其他详细信息
Blob URL(参考 W3C,正式名称)或对象 URL(参考 MDN 和方法名称)与 Blob 或 File 对象一起使用。
src="blob:https://crap.crap" 我打开了视频 src 中的 blob url,它给出了一个错误,我无法打开,但正在使用 src 标签,这怎么可能?
Blob URL 只能由浏览器在内部生成。 URL.createObjectURL()
将创建对 Blob 或 File 对象的特殊引用,稍后可以使用 URL.revokeObjectURL()
释放该引用。这些 URL 只能在浏览器的单个实例和同一会话(即页面/文档的生命周期)中本地使用。
什么是 blob 网址?为什么使用它?
Blob URL/Object URL 是一种伪协议,允许将 Blob 和 File 对象用作图像、二进制数据下载链接等的 URL 源。
例如,您不能处理 Image 对象的原始字节数据,因为它不知道如何处理它。例如,它需要通过 URL 加载图像(二进制数据)。这适用于任何需要 URL 作为源的东西。与其上传二进制数据,然后通过 URL 将其返回,不如使用额外的本地步骤,以便能够直接访问数据而无需通过服务器。
它也是编码为 Base-64 的字符串的 Data-URI 的更好替代方案。 Data-URI 的问题是每个字符在 JavaScript 中占用两个字节。最重要的是,由于 Base-64 编码,增加了 33%。 Blob 是纯二进制字节数组,不会像 Data-URI 那样有任何显着的开销,这使得它们处理起来更快更小。
我可以在服务器上创建自己的 blob url 吗?
不可以,Blob URL/对象 URL 只能在浏览器内部创建。您可以通过 File Reader API 创建 Blob 并获取 File 对象,尽管 BLOB 仅表示二进制大对象并且存储为字节数组。客户端可以请求将数据作为 ArrayBuffer 或 Blob 发送。服务器应该将数据作为纯二进制数据发送。数据库也经常使用 Blob 来描述二进制对象,本质上我们基本上是在谈论字节数组。
如果您有其他详细信息
您需要将二进制数据封装为 BLOB 对象,然后使用 URL.createObjectURL()
为其生成本地 URL:
var blob = new Blob([arrayBufferWithPNG], {type: "image/png"}),
url = URL.createObjectURL(blob),
img = new Image();
img.onload = function() {
URL.revokeObjectURL(this.src); // clean-up memory
document.body.appendChild(this); // add image to DOM
}
img.src = url; // can now "stream" the bytes
请注意,URL
可能在 webkit-browsers 中作为前缀,因此请使用:
var url = (URL || webkitURL).createObjectURL(...);
此 Javascript 函数支持显示 Blob 文件 API 和数据 API 之间的区别,以在客户端浏览器中下载 JSON 文件:
该函数的调用方式类似于 saveAsFile('out.json', jsonString);
。它将创建一个浏览器立即识别的 ByteStream,该浏览器将使用 File API URL.createObjectURL
直接下载生成的文件。
在 else
中,可以看到通过 href
元素加上 Data API 获得的相同结果,但这有一些 Blob API 没有的限制。
.href
设置为 downloadLink.href="blob:https://www.wmur.com/aa14dc0d-c44c-4072-b918-bff92d26b9b7"
并调用 downloadLink.click()
时,它会给我一个错误 Network Error
。
Blob
对象的情况下,您将使用它来存储文件的二进制化内容,但此功能无论如何都会将其保存为可下载文件,但使用 api createObjectURL
;因此无需更改 href
,除非您的目标是做一些不同的事情。
我已经修改了工作解决方案来处理这两种情况..上传视频和上传图片时..希望它会有所帮助。
HTML
<input type="file" id="fileInput">
<div> duration: <span id='sp'></span><div>
Javascript
var fileEl = document.querySelector("input");
fileEl.onchange = function(e) {
var file = e.target.files[0]; // selected file
if (!file) {
console.log("nothing here");
return;
}
console.log(file);
console.log('file.size-' + file.size);
console.log('file.type-' + file.type);
console.log('file.acutalName-' + file.name);
let start = performance.now();
var mime = file.type, // store mime for later
rd = new FileReader(); // create a FileReader
if (/video/.test(mime)) {
rd.onload = function(e) { // when file has read:
var blob = new Blob([e.target.result], {
type: mime
}), // create a blob of buffer
url = (URL || webkitURL).createObjectURL(blob), // create o-URL of blob
video = document.createElement("video"); // create video element
//console.log(blob);
video.preload = "metadata"; // preload setting
video.addEventListener("loadedmetadata", function() { // when enough data loads
console.log('video.duration-' + video.duration);
console.log('video.videoHeight-' + video.videoHeight);
console.log('video.videoWidth-' + video.videoWidth);
//document.querySelector("div")
// .innerHTML = "Duration: " + video.duration + "s" + " <br>Height: " + video.videoHeight; // show duration
(URL || webkitURL).revokeObjectURL(url); // clean up
console.log(start - performance.now());
// ... continue from here ...
});
video.src = url; // start video load
};
} else if (/image/.test(mime)) {
rd.onload = function(e) {
var blob = new Blob([e.target.result], {
type: mime
}),
url = URL.createObjectURL(blob),
img = new Image();
img.onload = function() {
console.log('iamge');
console.dir('this.height-' + this.height);
console.dir('this.width-' + this.width);
URL.revokeObjectURL(this.src); // clean-up memory
console.log(start - performance.now()); // add image to DOM
}
img.src = url;
};
}
var chunk = file.slice(0, 1024 * 1024 * 10); // .5MB
rd.readAsArrayBuffer(chunk); // read file object
};
jsFiddle 网址
https://jsfiddle.net/PratapDessai/0sp3b159/
OP问:
什么是 blob URL?为什么使用它?
Blob 只是字节序列。浏览器将 Blob 识别为字节流。它用于从源获取字节流。根据Mozilla's documentation
Blob 对象表示不可变的原始数据的类似文件的对象。 Blob 表示不一定采用 JavaScript 原生格式的数据。 File 接口基于 Blob,继承了 blob 功能并将其扩展为支持用户系统上的文件。
OP问:
我可以在服务器上创建自己的 blob url 吗?
是的,您可以使用多种方法,例如尝试 http://php.net/manual/en/function.ibase-blob-echo.php
在这里阅读更多:
https://developer.mozilla.org/en-US/docs/Web/API/Blob
http://www.w3.org/TR/FileAPI/#dfn-Blob
https://url.spec.whatwg.org/#urls
blob url 用于显示用户上传的文件,但它们还有许多其他用途,例如它可以用于安全文件显示,例如在不下载扩展程序的情况下获取 YouTube 视频有点困难。但是,它们可能是更多的答案。我的研究主要是我使用 Inspect 来尝试获取 YouTube 视频和 online article。
blob:
URL?我假设浏览器将视频流下载为二进制文件,然后使用 blob URL 创建视频元素。他有什么比让视频元素直接下载 URL 更好的呢?