图片处理成二进制流

最新推荐文章于 2025-08-18 14:54:54 发布

原创最新推荐文章于 2025-08-18 14:54:54 发布 · 5.6k 阅读

本内容遵循CC 4.0 BY-SA版权协议

文章介绍了如何利用JavaScript中的FileReader和BlobAPI，结合XMLHttpRequest，将图片URL转换为二进制流。提供了一个函数示例，该函数接收图片URL，返回一个Promise，成功时解析为Blob对象。同时，文章还提到了将本地图片文件转换为二进制流的方法。

在前端，可以使用 JavaScript 中的 FileReader 和 Blob API 将图片文件转换为二进制流，以下是一个简单的示例函数：

function convertImageToBlob(imageUrl) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', imageUrl, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(`Error fetching image: ${xhr.statusText}`));
      }
    };
    xhr.onerror = () => {
      reject(new Error('Network error'));
    };
    xhr.send();
  });
}

这个函数接受一个图片 URL 作为参数，返回一个 Promise 对象，最终解析为二进制数据。在函数中，我们使用 XMLHttpRequest 对象发送一个 GET 请求，将响应类型设置为 blob。然后在 onload 事件中，如果请求成功，调用 Promise 的 resolve 方法将响应对象作为结果返回；否则，调用 reject 方法返回一个错误对象。

使用该函数的示例如下：

const imageUrl = 'https://example.com/image.jpg';

convertImageToBlob(imageUrl).then((blob) => {
  // 使用 blob 对象进行后续操作
  console.log(blob);
}).catch((error) => {
  // 错误处理
  console.error(error);
});

该函数可以用于将在线图片转换成二进制流。如果您需要将本地的图片文件转换为二进制流，可以使用类似的方法，首先获取 <input type="file"> 元素的 File 对象，然后使用 FileReader API 将文件转换为二进制流。

标签