JavaScript |斑点

Blob 对象只是一组字节，用于保存存储在文件中的数据。看起来 blob 是对实际文件的引用，但实际上并非如此。一个 blob 有它的大小和 MIME，就像一个简单的文件一样。 Blob 数据存储在用户的内存或文件系统中，具体取决于浏览器功能和 Blob 的大小。一个简单的 blob 可以在我们希望的任何地方使用，就像文件一样。
Blob 的内容可以很容易地作为 ArrayBuffer 读取，这使得 Blob 非常方便地存储二进制数据。

创建 Blob 的语法：

var abc = new Blob(["Blob Content"], 
    {type: Blob Property containing MIME property})

除了直接将数据插入 Blob 之外，我们还可以使用 FileReader 类从该 Blob 中读取数据：

var abc = new Blob(["GeeksForGeeks"], 
                {type : "text/plain"});
var def = new FileReader();
def.addEventListener("loadend", function(e) {
    document.getElementById("para").innerHTML
                     = e.srcElement.result;
});
  
def.readAsText(abc);

在 HTML 文件中，我们只需创建一个简单的

元素，id=”para”：

您将获得以下输出：

GeeksForGeeks

Blob URL：就像我们有引用本地文件系统中一些真实文件的文件 URL 一样，我们也有引用 Blob 的 Blob URL。 Blob URL 与任何常规 URL 非常相似，因此几乎可以在我们可以使用通用 URL 的任何地方使用。 Blob 可以很容易地用作 、 或其他标签的 URL，以显示其内容。可以使用 createObjectURL 对象获取指向 blob 的 blob URL：

  

    
        JavaScript Blob
    

  

    Download
  
    
        let abc = new Blob(["Geeks For Geeks"],
                { type: 'text/plain' });
  
        link.href = URL.createObjectURL(abc);
    

  

输出：
您将获得下载的动态生成的 Blob，其内容为 Geeks For Geeks：

Blob To ArrayBuffer： Blob 构造函数可用于从包括任何类型的 BufferSource 在内的任何内容创建 Blob。对于低级处理，我们可以使用 FileReader 从 blob 中使用最低级别的 ArrayBuffer：

let def = new FileReader();
  
def.readAsArrayBuffer(abc);
  
def.onload = function(event) {
    let res = def.result;
};

使用 Blob 的优点：

• Blob 是向数据库添加大型二进制数据文件的好选择，并且可以轻松引用。
• 在使用 Blob 时，使用权限管理很容易设置访问权限。
• Blob 的数据库备份包含所有数据。

使用 Blob 的缺点：

• 并非所有数据库都允许使用 Blob。
• 由于所需的磁盘空间量和访问时间，Blob 效率低下。
• 由于 Blob 的文件大小，创建备份非常耗时。