什么是blob URL以及为何使用它?

时间:2015-06-16 10:09:37

标签: html5-video bloburls

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

我在YouTube上搜索了src的视频标记,我发现视频src就像:

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

我打开了导致错误的视频src中的blob网址。我无法打开该链接,但它正在使用src标记。这怎么可能?

要求:

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

4 个答案:

答案 0 :(得分:229)

Blob网址(参考W3C,官方名称)或对象网址(参考MDN和方法名称)与BlobFile对象一起使用。

  

SRC ="斑点:https://crap.crap"我打开了src中的blob网址   视频它给出了一个错误,我无法打开,但正在使用src   标记它是如何可能的?

Blob URL只能由浏览器在内部生成。 URL.createObjectURL()将创建对Blob或File对象的特殊引用,稍后可以使用URL.revokeObjectURL()发布该对象。这些URL只能在浏览器的单个实例中本地使用,并且可以在同一会话中使用(即页面/文档的生命周期)。

  

什么是blob网址?
  为什么使用它?

Blob URL / Object URL是一种伪协议,允许Blob和File对象用作图像,下载二进制数据链接等URL源。

例如,您无法处理Image对象原始字节数据,因为它不知道如何处理它。例如,它需要通过URL加载图像(二进制数据)。这适用于需要URL作为源的任何内容。而不是上传二进制数据,然后通过URL提供服务,最好使用额外的本地步骤,以便能够直接访问数据,而无需通过服务器。

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

  

我可以在服务器上创建自己的blob网址吗?

不,Blob URL / Object URL只能在浏览器内部进行。您可以通过File Reader API创建Blob并获取File对象,尽管BLOB只是意味着Binary Large OBject并存储为字节数组。客户端可以请求将数据作为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浏览器中添加前缀,因此请使用:

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

答案 1 :(得分:3)

什么是blob网址?为何使用它?

BLOB只是字节序列。浏览器将其识别为字节流。它用于从源获取字节流。

  

Blob对象表示不可变的原始数据的类文件对象。 Blob表示不一定采用JavaScript本机格式的数据。 File接口基于Blob,继承blob功能并将其扩展为支持用户系统上的文件。

我可以在服务器上创建自己的blob网址吗?

是的,您可以通过多种方式执行此操作,例如尝试http://php.net/manual/en/function.ibase-blob-echo.php

了解更多

答案 2 :(得分:3)

此Javascript函数旨在显示 Blob 文件API与数据 API之间的差异,以便在客户端浏览器中下载 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));
&#13;
&#13;
&#13;

该函数被调用为saveAsFile('out.json', jsonString);。它将创建一个立即被浏览器识别的ByteStream,它将使用文件API URL.createObjectURL直接下载生成的文件。

else中,可以看到通过href元素和数据API获得的相同结果,但这有一些限制,Blob API没有。

答案 3 :(得分:1)

我已经修改了工作解决方案,可以处理以下情况:。上传视频时和上传图片时..希望对您有所帮助。

html  持续时间:

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('image');
                            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/