在JS中如何将一张图片进行Base64编码

老二天天干活

在JS中如何将一张图片进行Base64编码，麻烦附上代码

空竹

// 选择要上传的图片文件
var fileInput = document.getElementById('input');
var file = fileInput.files[0];

// 创建FileReader对象
var reader = new FileReader();

// 文件读取完成后触发以下函数
reader.onload = function() {
  // 将文件内容转换为Base64编码格式
  var base64 = reader.result.split(',')[1];
  console.log(base64);
};

// 开始读取图片文件
reader.readAsDataURL(file);

空竹

// 创建一个 Image 对象
var img = new Image();

// 图片加载完成后触发以下函数
img.onload = function() {
  // 创建一个 Canvas 对象
  var canvas = document.createElement("canvas");

  // 将 Canvas 的宽高设置为图片的实际宽高
  canvas.width = this.width;
  canvas.height = this.height;

  // 在 Canvas 上绘制图片
  var ctx = canvas.getContext("2d");
  ctx.drawImage(this, 0, 0);

  // 将 Canvas 转换为 Base64 编码格式
  var base64 = canvas.toDataURL("image/png");
  console.log(base64);
};

// 设置要加载的图片路径
img.src = "image.png";

空竹

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 设置响应类型为 "blob"
xhr.responseType = 'blob';

// 创建一个 GET 请求以获取图像数据
xhr.open('GET', 'image.png', true);

// 发送请求
xhr.send();

// 图片加载完成后触发以下函数
xhr.onload = function() {
  // 成功获取图像数据
  if (xhr.status === 200) {
    // 创建 FileReader 对象
    var reader = new FileReader();

    // 文件读取完成后触发以下函数
    reader.onloadend = function() {
      // 将图像数据转换为 Base64 格式
      var base64 = reader.result.replace("data:", "").replace(/^.+,/, "");
      console.log(base64);
    }

    // 开始读取文件
    reader.readAsDataURL(xhr.response);
  }
};