我在使用 blob URL 时遇到了很多问题。
我在搜索src视频标签,发现视频src如下:
src
src="blob:https://crap.crap"
我打开了src视频中的 blob URL,它给出了错误。我无法打开链接,但它正在使用src标签。这怎么可能?
要求:
Blob URL(参考W3C,官方名称)或 Object-URL(参考MDN和方法名称)与Blob或File对象一起使用。
src=”blob:https://crap.crap" 我打开了视频 src 中的 blob url,它给出了一个错误,我无法打开,但正在使用 src 标签,这怎么可能?
Blob URL 只能由浏览器在内部生成。URL.createObjectURL()将创建对 Blob 或 File 对象的特殊引用,稍后可以使用URL.revokeObjectURL(). 这些 URL 只能在浏览器的单个实例和同一会话(即页面/文档的生命周期)中本地使用。
URL.createObjectURL()
URL.revokeObjectURL()
什么是 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 中添加前缀,因此请使用:
URL
var url = (URL || webkitURL).createObjectURL(...);