什么是 blob URL 以及为什么要使用它？

Question

我在使用 blob URL 时遇到了很多问题。

我在 YouTube 上搜索 src 视频标签，我发现视频 src 是这样的：

src="blob:https://crap.crap"

我打开了视频 src 中的 blob URL，但出现错误。我无法打开 link，但它正在使用 src 标签。这怎么可能？

要求：

什么是 blob URL？
为什么使用它？
我可以在服务器上创建自己的 blob URL 吗？
如果您有任何其他详细信息

Answer 1

OP 询问：

What is blob URL? Why is it used?

Blob 只是字节序列。浏览器将 Blob 识别为字节流。它用于从源中获取字节流。根据Mozilla's documentation

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

OP 询问：

Can i make my own blob url on a server?

是的，你可以有多种方法，例如尝试 http://php.net/manual/en/function.ibase-blob-echo.php

在此处阅读更多内容：

Answer 2

Blob URLs（ref W3C, official name) or Object-URLs (ref. MDN and method name) are used with a Blob or a File 对象。

src="blob:https://crap.crap" I opened the blob url that was in src of video it gave a error and i can't open but was working with the src tag how it is possible?

Blob URLs 只能由浏览器内部生成。 URL.createObjectURL() will create a special reference to the Blob or File object which later can be released using URL.revokeObjectURL()。这些 URL 只能在浏览器的单个实例和同一会话中本地使用（即 page/document 的生命周期）。

What is blob url?
Why it is used?

Blob URL/Object URL 是一个伪协议，允许将 Blob 和文件对象用作 URL 图像、二进制数据下载链接等内容的来源。

例如，您不能将原始字节数据交给 Image 对象，因为它不知道如何处理它。例如，它需要通过 URLs 加载图像（二进制数据）。这适用于任何需要 URL 作为来源的东西。与其上传二进制数据，然后通过 URL 返回，不如使用额外的本地步骤，以便能够直接访问数据，而无需通过服务器。

它也是 Data-URI 的更好替代品，Data-URI 是编码为 Base-64 的字符串。 Data-URI 的问题是每个字符在 JavaScript 中占用两个字节。最重要的是，由于 Base-64 编码，增加了 33%。 Blob 是纯二进制字节数组，不像 Data-URI 那样有任何显着的开销，这使得它们处理起来更快更小。

Can i make my own blob url on a server?

不，Blob URLs/Object URLs 只能在浏览器内部生成。您可以创建 Blob 并通过 File Reader API 获取 File 对象，尽管 BLOB 仅表示 Binary Large OBject 并存储为字节数组。客户端可以请求将数据作为 ArrayBuffer 或 Blob 发送。服务器应将数据作为纯二进制数据发送。数据库也经常使用 Blob 来描述二进制对象，本质上我们基本上是在谈论字节数组。

if you have then Additional detail

需要将二进制数据封装为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

注意webkit-browsers中可能有URL前缀，所以使用：

var url = (URL || webkitURL).createObjectURL(...);

Answer 3

这个Javascript函数支持显示Blob文件API和DataAPI 在客户端浏览器中下载 JSON 文件：

/**
 * Save a text as file using HTML <a> temporary element and Blob
 * @author Loreto Parisi
 */

var saveAsFile = function(fileName, fileContents) {
    if (typeof(Blob) != 'undefined') { // Alternative 1: using Blob
        var textFileAsBlob = new Blob([fileContents], {type: 'text/plain'});
        var downloadLink = document.createElement("a");
        downloadLink.download = fileName;
        if (window.webkitURL != null) {
            downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        } else {
            downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
            downloadLink.onclick = document.body.removeChild(event.target);
            downloadLink.style.display = "none";
            document.body.appendChild(downloadLink);
        }
        downloadLink.click();
    } else { // Alternative 2: using Data
        var pp = document.createElement('a');
        pp.setAttribute('href', 'data:text/plain;charset=utf-8,' +
            encodeURIComponent(fileContents));
        pp.setAttribute('download', fileName);
        pp.onclick = document.body.removeChild(event.target);
        pp.click();
    }
} // saveAsFile

/* Example */
var jsonObject = {"name": "John", "age": 30, "car": null};
saveAsFile('out.json', JSON.stringify(jsonObject, null, 2));

该函数的调用方式与 saveAsFile('out.json', jsonString); 相同。它将创建一个由浏览器立即识别的字节流，该浏览器将使用文件 API URL.createObjectURL.

直接下载生成的文件

在 else 中，可以看到通过 href 元素加上数据 API 获得的相同结果，但这有一些局限性，即 Blob [=33] =] 没有。

Answer 4

我已经修改了工作解决方案来处理这两种情况..上传视频和上传图片时..希望它会有所帮助。

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 Url

https://jsfiddle.net/PratapDessai/0sp3b159/

Answer 5

blob url 用于显示用户上传的文件，但它们还有许多其他用途，比如它可以用于安全文件显示，比如不下载 YouTube 视频有点困难延期。但是，它们可能是更多的答案。我的研究主要是我使用 Inspect 尝试获取 YouTube 视频和 online article.

什么是 blob URL 以及为什么要使用它？

What is a blob URL and why it is used?

html5-video

bloburls