vue3项目图片压缩

在Vue3项目中，图片压缩通常是为了优化页面性能和用户体验，特别是在上传或显示大图时。可以使用一些第三方库，如`vue-quilicker`、`sharp`（Node.js库）、`html2canvas`等来实现图片的前端压缩。

`vue-quilicker`是一个基于Canvas API的轻量级插件，它允许你在浏览器端对图片进行压缩，并提供裁剪和质量控制选项。

例如，你可以这样做：

import Quilicker from 'vue-quilicker';

export default {
  components: {
    ImageCompressor: {
      props: ['src', 'maxWidth', 'maxHeight'],
      mounted() {
        this.compressImage();
      },
      methods: {
        compressImage() {
          Quilicker.make(this.src)
            .width(this.maxWidth) // 设置最大宽度
            .height(this.maxHeight) // 设置最大高度
            .quality(0.8) // 设置压缩质量 (范围0-1)
            .toDataURL((dataUrl) => {
              this.compressedImageUrl = dataUrl;
            });
        }
      }
    }
  }
}

然后在模板中使用这个组件：

<template>
  <div>
    <ImageCompressor :src="originalImageUrl" :maxWidth="500" :maxHeight="300" @compressedImageUrl="setImage" />
  </div>
</template>

<script>
// 使用组件生成的压缩图片URL
setImage(compressedImageUrl) {
  this.compressedImage = compressedImageUrl; // 将压缩后的图片URL存储到组件的数据中
}
</script>