vue 压缩图片不失真

在 Vue 中，可以使用 `canvas` 元素来压缩图片，从而实现不失真的效果。具体操作步骤如下：

1. 使用 `new Image()` 创建一个图片对象，设置其 `src` 为需要压缩的图片地址。
2. 在图片加载完成后，使用 `canvas` 元素将图片绘制到画布上。
3. 设置画布的宽高和绘制的图片宽高比一致，使用 `toDataURL()` 方法将画布上的图片数据转化为 Base64 编码的字符串。
4. 将 Base64 编码的字符串传递给后端进行上传或存储。

以下是示例代码：

<template>
  <input type="file" @change="compressImage">
</template>

<script>
export default {
  methods: {
    compressImage(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file); // 转换为 Base64 编码
      reader.onload = (event) => {
        const img = new Image();
        img.src = event.target.result;
        img.onload = () => {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0, img.width, img.height);
          const dataUrl = canvas.toDataURL('image/jpeg', 0.8); // 压缩图片质量，可调整压缩比例
          console.log(dataUrl); // 输出 Base64 编码的字符串，可传递给后端进行上传或存储
        };
      };
    }
  }
}
</script>

需要注意的是，压缩图片质量的时候，压缩比例越大，图片压缩后的大小越小，但是图片质量也会越来越差。因此需要根据实际需求选择合适的压缩比例。