当前位置：首页 > VUE

vue实现头像剪切

2026-01-07 00:52:21VUE

Vue 实现头像剪切的实现方法

使用 vue-cropperjs 库

vue-cropperjs 是一个基于 cropperjs 的 Vue 组件，专门用于图片裁剪。安装方式如下：

npm install vue-cropperjs

在组件中引入并使用：

<template>
  <div>
    <input type="file" @change="uploadImage" accept="image/*">
    <vue-cropper
      ref="cropper"
      :src="imgSrc"
      :aspectRatio="1"
      :viewMode="1"
    ></vue-cropper>
    <button @click="cropImage">裁剪</button>
  </div>
</template>

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

export default {
  components: { VueCropper },
  data() {
    return {
      imgSrc: ''
    };
  },
  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 formData = new FormData();
        formData.append('avatar', blob, 'avatar.png');
        // 上传 formData 到服务器
      });
    }
  }
};
</script>

使用 cropperjs 直接集成

如果不希望使用 vue-cropperjs，可以直接集成 cropperjs：

npm install cropperjs

实现代码示例：

<template>
  <div>
    <input type="file" @change="uploadImage" accept="image/*">
    <img ref="image" src="">
    <button @click="crop">裁剪</button>
  </div>
</template>

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

export default {
  data() {
    return {
      cropper: null
    };
  },
  methods: {
    uploadImage(e) {
      const file = e.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = (event) => {
        this.$refs.image.src = event.target.result;
        this.cropper = new Cropper(this.$refs.image, {
          aspectRatio: 1
        });
      };
      reader.readAsDataURL(file);
    },
    crop() {
      this.cropper.getCroppedCanvas().toBlob((blob) => {
        // 处理裁剪后的 blob
      });
    }
  }
};
</script>

自定义裁剪功能

如果需要更简单的实现，可以使用 canvas 手动裁剪：

<template>
  <div>
    <input type="file" @change="handleFile" accept="image/*">
    <canvas ref="canvas"></canvas>
    <button @click="crop">裁剪</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleFile(e) {
      const file = e.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = (event) => {
        const img = new Image();
        img.onload = () => {
          const canvas = this.$refs.canvas;
          canvas.width = 200; // 目标宽度
          canvas.height = 200; // 目标高度
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0, 200, 200);
        };
        img.src = event.target.result;
      };
      reader.readAsDataURL(file);
    },
    crop() {
      const canvas = this.$refs.canvas;
      canvas.toBlob((blob) => {
        // 处理裁剪后的 blob
      });
    }
  }
};
</script>