JS图片压缩预览实现教程

function compressImage(file, maxWidth = 800, quality = 0.8) {
  return new Promise((resolve) => {
    const img = new Image();
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
const reader = new FileReader();
reader.onload = function(e) {
  img.src = e.target.result;
};

img.onload = function() {
  let { width, height } = img;

  // 按最大宽度等比缩放
  if (width > maxWidth) {
    height = Math.round((height * maxWidth) / width);
    width = maxWidth;
  }

  canvas.width = width;
  canvas.height = height;

  ctx.drawImage(img, 0, 0, width, height);

  // 导出压缩后的图片（JPEG 格式，质量 0.8）
  const compressedData = canvas.toDataURL('image/jpeg', quality);
  resolve(compressedData);
};

reader.readAsDataURL(file);
});
}

document.getElementById('upload').addEventListener('change', async function(e) {
  const file = e.target.files[0];
  if (!file) return;
// 压缩图片
const compressedDataURL = await compressImage(file, 800, 0.7);
// 显示预览
const preview = document.getElementById('preview');
preview.src = compressedDataURL;
// 如需上传，可将 base64 转为 Blob 发送
// const blob = dataURLToBlob(compressedDataURL);
});

function dataURLToBlob(dataurl) {
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}