JavaScript 将图片转为base64的方法

Question

JavaScript 将图片转为base64的方法。
求JavaScript 将图片转为base64的方法

Answer 1

在 JavaScript 中，可以使用 File API 和Canvas API 将图片转为base64格式的数据。以下是两种常用的方案：

1. 使用 FileReader 和 Canvas API

使用 FileReader 读取图片数据，然后使用 Canvas 在内存中创建一张尺寸和图像文件一样的画布，并在其中绘制读取的图像文件，最后将画布中的图像数据转为 base64 编码即可。

示例代码如下：

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    if (!file) return reject(new Error("文件不存在！"));
    if (!/image\/\w+/.test(file.type)) {
      return reject(new Error("文件类型不是图片！"));
    }
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
      const img = new Image();
      img.src = this.result;
      img.onload = function() {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, img.width, img.height);
        const dataURL = canvas.toDataURL(file.type);
        resolve(dataURL);
      }
    };
    reader.onerror = function() {
      reject(new Error("文件读取出错！"));
    };
  });
}

调用方式：

const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if(file) {
  fileToBase64(file).then(dataURL => {
    console.log(dataURL); // 输出转换后的 base64 编码
  }).catch(error => {
    console.error(error);
  });
}

1. 使用 XMLHttpRequest 和 Blob

使用 XMLHttpRequest 读取图片数据，然后将数据转为 Blob 对象，并使用 FileReader 读取 Blob 数据，在其 onload 回调中将数据转为 base64 编码即可。

示例代码如下：

function imageToBase64(imageUrl) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', imageUrl, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
      if (this.status === 200) {
        const reader = new FileReader();
        reader.readAsDataURL(this.response);
        reader.onload = function() {
          resolve(this.result);
        };
        reader.onerror = function() {
          reject(new Error("读取数据出错！"));
        };
      } else {
        reject(new Error("请求出错！"));
      }
    };
    xhr.onerror = function() {
      reject(new Error("请求出错！"));
    };
    xhr.send();
  });
}

调用方式：

const imageUrl = 'https://example.com/image.png';
imageToBase64(imageUrl).then(dataURL => {
  console.log(dataURL); // 输出转换后的 base64 编码
}).catch(error => {
  console.error(error);
});

以上两种方案都可以将图片转为 base64 编码，具体使用哪种方案，可以根据实际的场景和需求进行选择。