回答

在 JavaScript 中，你可以使用多种方法将图片 URL 转换为 Base64 编码。以下是使用浏览器内置的 Fetch API 和 FileReader 的示例代码：

使用 Fetch API 和 FileReader

async function convertImageToBase64(imageUrl) {
  // Fetch the image from the URL
  const response = await fetch(imageUrl);

  // Ensure the response is a blob (binary large object)
  const blob = await response.blob();

  // Create a FileReader to read the blob as a data URL (Base64)
  const reader = new FileReader();

  // Return a promise that resolves when the FileReader reads the blob
  return new Promise((resolve, reject) => {
    reader.onloadend = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

// Example usage
const imageUrl = 'https://example.com/path/to/image.jpg';
convertImageToBase64(imageUrl)
  .then(base64Image => {
    console.log('Base64 Image:', base64Image);
  })
  .catch(error => {
    console.error('Error:', error);
  });

说明Fetch API: 使用 fetch 从给定的图片 URL 获取响应。Blob: 将响应转换为 blob（二进制大对象），以便后续处理。FileReader: 使用 FileReader 对象将 blob 读取为 data URL（Base64 编码）。Promise: 返回一个 Promise，当 FileReader 读取完成时解析此 Promise，提供 Base64 编码的结果。使用 XMLHttpRequest 和 FileReader

另一种方法是使用 XMLHttpRequest 和 FileReader：

function convertImageToBase64(imageUrl) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', imageUrl, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
      if (xhr.status === 200) {
        const reader = new FileReader();
        reader.onloadend = function() {
          resolve(reader.result);
        };
        reader.onerror = reject;
        reader.readAsDataURL(xhr.response);
      } else {
        reject(new Error('Image load error'));
      }
    };
    xhr.onerror = function() {
      reject(new Error('Network error'));
    };
    xhr.send();
  });
}

// Example usage
const imageUrl = 'https://example.com/path/to/image.jpg';
convertImageToBase64(imageUrl)
  .then(base64Image => {
    console.log('Base64 Image:', base64Image);
  })
  .catch(error => {
    console.error('Error:', error);
  });

说明XMLHttpRequest: 使用 XMLHttpRequest 对象发出 GET 请求以获取图片。Response Type: 将 responseType 设置为 blob 以接收二进制数据。FileReader: 使用 FileReader 对象将 blob 读取为 data URL（Base64 编码）。Promise: 返回一个 Promise，当 FileReader 读取完成时解析此 Promise，提供 Base64 编码的结果。

这两种方法都可以将图片 URL 转换为 Base64 编码，你可以根据你的需求选择适合的方法。