vue实现头像剪切

Vue 实现头像剪切功能

使用 cropperjs 库

安装 cropperjs 库：

npm install cropperjs

在 Vue 组件中引入并使用：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*">
    <img ref="image" src="" alt="Avatar">
    <button @click="cropImage">裁剪</button>
  </div>
</template>

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

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

      this.imageFile = file;
      const reader = new FileReader();
      reader.onload = (event) => {
        this.$refs.image.src = event.target.result;
        this.initCropper();
      };
      reader.readAsDataURL(file);
    },
    initCropper() {
      if (this.cropper) {
        this.cropper.destroy();
      }
      this.cropper = new Cropper(this.$refs.image, {
        aspectRatio: 1,
        viewMode: 1,
      });
    },
    cropImage() {
      if (!this.cropper) return;
      const croppedCanvas = this.cropper.getCroppedCanvas();
      const croppedImage = croppedCanvas.toDataURL('image/jpeg');
      // 处理裁剪后的图片，如上传或保存
      console.log(croppedImage);
    }
  }
};
</script>

使用 vue-cropper 组件

安装 vue-cropper：

npm install vue-cropper

在 Vue 组件中使用：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*">
    <vue-cropper
      ref="cropper"
      :img="imageSrc"
      :autoCrop="true"
      :fixed="true"
      :fixedNumber="[1, 1]"
    ></vue-cropper>
    <button @click="cropImage">裁剪</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper';

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

      const reader = new FileReader();
      reader.onload = (event) => {
        this.imageSrc = event.target.result;
      };
      reader.readAsDataURL(file);
    },
    cropImage() {
      this.$refs.cropper.getCropData((data) => {
        // 处理裁剪后的图片数据
        console.log(data);
      });
    }
  }
};
</script>

自定义实现基础裁剪

如果不需要复杂功能，可以简单实现：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*">
    <div class="crop-container" ref="container">
      <img :src="imageSrc" ref="image" @load="initCrop">
    </div>
    <button @click="cropImage">裁剪</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '',
      cropData: {
        x: 0,
        y: 0,
        width: 100,
        height: 100
      }
    };
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (event) => {
        this.imageSrc = event.target.result;
      };
      reader.readAsDataURL(file);
    },
    initCrop() {
      // 初始化裁剪区域
      const img = this.$refs.image;
      this.cropData.width = Math.min(img.width, img.height);
      this.cropData.height = this.cropData.width;
    },
    cropImage() {
      const canvas = document.createElement('canvas');
      canvas.width = this.cropData.width;
      canvas.height = this.cropData.height;
      const ctx = canvas.getContext('2d');
      const img = this.$refs.image;

      ctx.drawImage(
        img,
        this.cropData.x, this.cropData.y,
        this.cropData.width, this.cropData.height,
        0, 0,
        this.cropData.width, this.cropData.height
      );

      const croppedImage = canvas.toDataURL('image/jpeg');
      // 处理裁剪后的图片
      console.log(croppedImage);
    }
  }
};
</script>

注意事项

• 裁剪比例可以通过设置 aspectRatio 调整，1:1 是常见的头像比例
• 移动端需要额外处理触摸事件
• 上传裁剪后的图片时可能需要转换为 Blob 或 FormData
• 考虑添加预览功能和裁剪区域拖动限制

以上方法提供了从简单到复杂的头像裁剪实现方案，可根据项目需求选择合适的方案。