vue3中压缩图片的大小

效果

上传一张图片，看看文件的大小。我们会发现小了很多

思路

图片太大也是因为宽高太大，进行宽高的缩放就可以了

 实现过程

const onUpload = async ({ file }) => {
    console.log(file);
    if (file.size / 1024 / 1024 > 100) {
      message.error('大小不能超过 100MB');
      return false;
    }

    // 创建一个 Image 对象
    const img = new Image();
    img.src = URL.createObjectURL(file);

    // 等待图片加载完成
    await new Promise((resolve, reject) => {
      img.onload = resolve;
      img.onerror = reject;
    });

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

    var aspectRatio = img.width / img.height;
    var newWidth = 750; // 新的宽度为 750
    var newHeight = newWidth / aspectRatio; // 根据宽高比计算新的高度

    canvas.width = newWidth;
    canvas.height = newHeight;

    // 在 Canvas 上绘制压缩后的图片
    ctx.drawImage(img, 0, 0, newWidth, newHeight);

    // 将 Canvas 中的图片转为 Blob 对象（压缩后的图片）
    canvas.toBlob(
      (blob) => {
        console.log(blob, 111);
        uploadFile(blob)
          .then((res) => {
            fileList.value.push({
              name: res.name,
              url: res.url
            });
            fileList.value = fileList.value.filter((item) => {
              if (item.status != 'uploading') {
                return item;
              }
            });
            message.success('上传成功');
          })
          .catch((e) => {
            message.error(e.message);
          });
      },
      file.type,
      0.7
    ); // 压缩质量，0.7 表示压缩率为 70%
  };