Blob JS的URL - Javascript

介绍

Blob JS 的 URL 是一种快速的方法，可将Blob（二进制大型对象）转换为可读取的URL。Blob JS 包括一个 Blob 构造函数和一个 URL API，它们可以使 JavaScript 读取和写入二进制数据流。

在许多情况下，Blob JS 的 URL 可以简化图片和文件的处理和组织。它允许您在不必等待加载的情况下在网页上一次性预加载所有数据，并且不需要对后端或CDN进行额外的HTTP请求。

Blob 构造函数

Blob 构造函数使用以下语法：

var myBlob = new Blob(blobParts, options);

其中，

• blobParts 是 Blob 的一部分或叠加部分（字节数组或字符串），将它们连接起来构成 Blob。
• options 是一个可选的对象，可以设置文件的类型（默认为 "text/plain"）和结束行（默认为 CRLF）。

例如，以下代码构造一个包含 "Hello World" 文本的 Blob：

var blobParts = ["Hello ", "World"];
var options = {type: "text/plain"};
var myBlob = new Blob(blobParts, options);

URL API

URL API 允许您为 Blob 创建可读的URL，它使用以下语法：

var url = URL.createObjectURL(myBlob);

其中，myBlob 是您创建的 Blob。

通过使用 URL 对象，您可以在、

var img = document.createElement("img");
img.src = url;
document.body.appendChild(img);

示例

以下是一个完整的示例，将一个图像文件加载到元素中：

var xhr = new XMLHttpRequest();
xhr.open("GET", "myImage.jpg", true);
xhr.responseType = "blob";

xhr.onload = function() {
  if (this.status == 200) {
    var myBlob = this.response;
    var url = URL.createObjectURL(myBlob);

    var img = document.createElement("img");
    img.src = url;
    document.body.appendChild(img);
  }
};

xhr.onerror = function() {
  console.log("Error occurred while fetching the image.");
};

xhr.send();

结论

Blob JS 的 URL 是一种强大又易于使用的 API，可根据需要创建和加载 Blob。用于在网页上处理和组织图片和文件的编程任务。