图片转换成Blob数据，简单几步轻松搞定！

2023-08-19 13:22:14

将图片转换为 Blob 数据：一个详尽的指南

什么是 Blob 数据？

Blob，全称二进制大对象（Binary Large OBject），是一种专门用于存储二进制数据的对象。它可以容纳任何类型的文件，包括图片、音频、视频和文档。Blob 数据常用于在客户端和服务器之间传输大量二进制数据。

如何将图片转换为 Blob 数据？

要将图片转换为 Blob 数据，我们使用 JavaScript 中的 ajax 方法：

function imageToBlob(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  xhr.onload = function() {
    if (xhr.status === 200) {
      callback(xhr.response);
    } else {
      console.error("Error: " + xhr.status + " " + xhr.statusText);
    }
  };
  xhr.send();
}

此函数接受两个参数：图像的 URL 和一个回调函数。它创建一个 XMLHttpRequest 对象，并使用 open() 方法打开一个 GET 请求，将 responseType 属性设置为 "blob"。这告诉浏览器以 Blob 数据格式返回响应。

接下来，它使用 onload 事件监听器监听请求的完成。如果请求成功（状态码为 200），则将 Blob 数据传递给回调函数。否则，它将打印一个错误消息。

如何使用 Blob 数据？

将图片转换为 Blob 数据后，我们就可以使用它了。我们可以将其存储在数据库中或发送到服务器。

存储 Blob 数据

要将 Blob 数据存储在数据库中，请使用以下代码：

var blob = imageToBlob("image.png", function(blob) {
  // 将 Blob 数据存储在数据库中
});

发送 Blob 数据

要将 Blob 数据发送到服务器，请使用以下代码：

var blob = imageToBlob("image.png", function(blob) {
  // 使用 FormData 对象将 Blob 数据发送到服务器
  var formData = new FormData();
  formData.append("image", blob, "image.png");

  // 发送 FormData 对象到服务器
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "upload.php", true);
  xhr.send(formData);
});