前端实现图片转base64

前端实现图片转Base64的方法有多种，以下是其中两种常见的方法：

1. 使用FileReader对象

// 获取input元素
const input = document.querySelector('input[type="file"]');

// 监听input元素的change事件
input.addEventListener('change', function() {
 // 获取文件
  const file = this.files[0];
  // 创建FileReader对象
  const reader = new FileReader();
  // 监听reader对象的load事件
  reader.addEventListener('load', function() {
    // 将图片转为Base64编码
    const base64Img = reader.result;
    console.log(base64Img);
  });
  // 读取文件
  reader.readAsDataURL(file);
});

2. 使用canvas对象

// 获取input元素
const input = document.querySelector('input[type="file"]');
// 获取canvas元素
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// 监听input元素的change事件
input.addEventListener('change', function() {
  // 获取文件
  const file = this.files[0];
  // 创建Image对象
  const img = new Image();
  // 监听img对象的load事件
  img.addEventListener('load', function() {
    // 将图片绘制到canvas上
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    // 将canvas转为Base64编码
    const base64Img = canvas.toDataURL();
    console.log(base64Img);
  });
  // 读取文件
  img.src = URL.createObjectURL(file);
});