js file图片上传压缩

// 获取文件输入元素
const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = new Image();
      img.src = e.target.result;
      img.onload = function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const maxWidth = 800; // 设置最大宽度
        const maxHeight = 600; // 设置最大高度
        let width = img.width;
        let height = img.height;

        // 计算新的尺寸
        if (width > height) {
          if (width > maxWidth) {
            height *= maxWidth / width;
            width = maxWidth;
          }
        } else {
          if (height > maxHeight) {
            width *= maxHeight / height;
            height = maxHeight;
          }
        }

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

        // 压缩质量
        canvas.toBlob(function(blob) {
          // 这里可以进行上传操作
          console.log('压缩后的图片:', blob);
        }, 'image/jpeg', 0.8); // 0.8 是 JPEG 图片的质量参数
      };
    };
    reader.readAsDataURL(file);
  }
});