js获取图片的base64编码并压缩

1. 获取图片的base64编码

获取图片的base64编码可以使用FileReader对象的readAsDataURL方法。具体步骤如下：

• 创建FileReader对象
• 监听文件加载完成事件
• 调用readAsDataURL方法读取文件

示例代码：

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

// 监听文件加载完成事件
reader.onload = function() {
  // 读取文件后的base64编码
  const base64Data = reader.result;
  console.log(base64Data);
}

// 调用readAsDataURL方法读取文件
const files = document.querySelector('input[type=file]').files;
if (files.length > 0) {
  reader.readAsDataURL(files[0]);
}

1. 压缩图片

压缩图片可以使用canvas对象的toDataURL方法。具体步骤如下：

• 创建canvas对象
• 加载图片并绘制到canvas上
• 设置压缩后的图片大小
• 调用toDataURL方法获取压缩后的base64编码

示例代码：

// 创建canvas对象
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 加载图片并绘制到canvas上
const img = new Image();
img.src = 'test.jpg';
img.onload = function() {
  // 绘制到canvas上
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);

  // 设置压缩后的图片大小
  const maxW = 800;
  const maxH = 800;
  let w = img.width;
  let h = img.height;
  if (w > maxW) {
    h = h * maxW / w;
    w = maxW;
  }
  if (h > maxH) {
    w = w * maxH / h;
    h = maxH;
  }
  canvas.width = w;
  canvas.height = h;

  // 绘制压缩后的图片并获取base64编码
  ctx.drawImage(img, 0, 0, w, h);
  const base64Data = canvas.toDataURL();
  console.log(base64Data);
}