图像下载：如何获取 URL 数据？

2023-11-24 22:00:09

从 URL 获取图像数据：Javascript Fetch API 指南

引言

在当今高度互联的世界中，图像已成为信息交流不可或缺的一部分。从社交媒体帖子到电子商务网站，图像无处不在。因此，掌握从 URL 获取图像数据的技术至关重要。在本指南中，我们将深入探讨使用 JavaScript Fetch API 从 URL 提取图像数据的过程。

获取图像 base64 数据

Base64 是一种将二进制数据编码为文本字符串的格式。这使图像数据能够轻松地在网络上传输或存储在文本文件中。要使用 JavaScript 获取图像的 base64 数据，请按照以下步骤操作：

获取响应对象： 使用 fetch() 函数获取图像 URL 的响应对象。
转换为 ArrayBuffer： 使用 arrayBuffer() 方法将响应转换为 ArrayBuffer 对象。
编码为 base64： 使用 btoa() 函数将 ArrayBuffer 对象编码为 base64 字符串。

代码示例：

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

const getImageBase64 = async () => {
  const response = await fetch(imageUrl);
  const arrayBuffer = await response.arrayBuffer();
  const base64 = btoa(new Uint8Array(arrayBuffer));
  return base64;
};

获取图像 Blob 数据

Blob 是一个表示二进制数据的对象。与 base64 数据相比，它更有效，并且允许直接操作图像，而无需对其进行解码。要使用 JavaScript 获取图像的 Blob 数据，请执行以下操作：

获取响应对象： 与获取 base64 数据相同，首先获取图像 URL 的响应对象。
转换为 Blob： 使用 blob() 方法将响应转换为 Blob 对象。

代码示例：

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

const getImageBlob = async () => {
  const response = await fetch(imageUrl);
  const blob = await response.blob();
  return blob;
};

示例代码：同时获取 base64 和 Blob 数据

为了进一步展示，以下示例代码将同时获取图像的 base64 和 Blob 数据：

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

const fetchImage = async () => {
  const response = await fetch(imageUrl);
  const arrayBuffer = await response.arrayBuffer();
  const base64 = btoa(new Uint8Array(arrayBuffer));
  const blob = await response.blob();
  return { base64, blob };
};