vue实现裁剪头像

Vue 实现头像裁剪功能

实现头像裁剪功能通常需要结合第三方库如 cropperjs 或 vue-cropper。以下是两种常见实现方式：

使用 vue-cropper 库

安装依赖：

npm install vue-cropperjs

组件示例代码：

<template>
  <div>
    <input type="file" @change="uploadImage" accept="image/*">
    <vue-cropper
      ref="cropper"
      :src="imgSrc"
      :aspect-ratio="1"
      :auto-crop-area="0.8"
    ></vue-cropper>
    <button @click="cropImage">裁剪</button>
    <img v-if="croppedImage" :src="croppedImage" alt="裁剪结果">
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  components: { VueCropper },
  data() {
    return {
      imgSrc: '',
      croppedImage: ''
    };
  },
  methods: {
    uploadImage(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (event) => {
        this.imgSrc = event.target.result;
      };
      reader.readAsDataURL(file);
    },
    cropImage() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        const reader = new FileReader();
        reader.onload = (event) => {
          this.croppedImage = event.target.result;
        };
        reader.readAsDataURL(blob);
      });
    }
  }
};
</script>

使用原生 cropperjs

安装依赖：

npm install cropperjs

组件示例代码：

<template>
  <div>
    <input type="file" @change="uploadImage" accept="image/*">
    <img ref="image" :src="imgSrc" style="max-width: 100%">
    <button @click="cropImage">裁剪</button>
    <img v-if="croppedImage" :src="croppedImage" alt="裁剪结果">
  </div>
</template>

<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  data() {
    return {
      imgSrc: '',
      croppedImage: '',
      cropper: null
    };
  },
  methods: {
    uploadImage(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (event) => {
        this.imgSrc = event.target.result;
        this.$nextTick(() => {
          this.initCropper();
        });
      };
      reader.readAsDataURL(file);
    },
    initCropper() {
      if (this.cropper) {
        this.cropper.destroy();
      }
      this.cropper = new Cropper(this.$refs.image, {
        aspectRatio: 1,
        viewMode: 1
      });
    },
    cropImage() {
      const canvas = this.cropper.getCroppedCanvas();
      this.croppedImage = canvas.toDataURL('image/jpeg');
    }
  },
  beforeDestroy() {
    if (this.cropper) {
      this.cropper.destroy();
    }
  }
};
</script>

关键参数说明

1. aspectRatio: 设置裁剪框的宽高比（1表示正方形）
2. autoCropArea: 初始裁剪区域占图片的比例
3. viewMode: 控制裁剪框不能超出画布范围
4. getCroppedCanvas(): 获取裁剪后的Canvas对象

注意事项

1. 移动端适配需要额外处理触摸事件
2. 大图片处理建议压缩后再裁剪
3. 裁剪结果可转换为Blob对象用于上传
4. 销毁组件时需要调用cropper.destroy()避免内存泄漏

两种方案均可实现需求，vue-cropper封装程度更高，cropperjs灵活性更强。根据项目复杂度选择合适方案。