vue实现头像剪切

Vue 实现头像剪切的步骤

使用 vue-cropper 库

vue-cropper 是一个基于 Vue 的图片裁剪组件，支持缩放、旋转、裁剪等功能。

安装依赖：

npm install vue-cropperjs

在组件中引入并使用：

<template>
  <div>
    <input type="file" @change="uploadImage" accept="image/*">
    <vue-cropper
      ref="cropper"
      :src="imgSrc"
      :auto-crop="true"
      :auto-crop-area="0.8"
    ></vue-cropper>
    <button @click="cropImage">裁剪</button>
    <img :src="croppedImg" v-if="croppedImg">
  </div>
</template>

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

export default {
  components: { VueCropper },
  data() {
    return {
      imgSrc: '',
      croppedImg: ''
    };
  },
  methods: {
    uploadImage(e) {
      const file = e.target.files[0];
      if (file) {
        this.imgSrc = URL.createObjectURL(file);
      }
    },
    cropImage() {
      this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
        this.croppedImg = URL.createObjectURL(blob);
      });
    }
  }
};
</script>

自定义裁剪功能

如果不使用第三方库，可以通过 Canvas 实现基础裁剪功能。

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*">
    <canvas ref="canvas"></canvas>
    <button @click="crop">裁剪</button>
    <img :src="croppedImage" v-if="croppedImage">
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: null,
      croppedImage: ''
    };
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (event) => {
          this.image = new Image();
          this.image.onload = () => {
            this.drawImage();
          };
          this.image.src = event.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    drawImage() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      canvas.width = this.image.width;
      canvas.height = this.image.height;
      ctx.drawImage(this.image, 0, 0);
    },
    crop() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      const croppedCanvas = document.createElement('canvas');
      const croppedCtx = croppedCanvas.getContext('2d');

      // 设置裁剪区域（示例为居中裁剪）
      const size = Math.min(canvas.width, canvas.height);
      croppedCanvas.width = size;
      croppedCanvas.height = size;

      croppedCtx.drawImage(
        canvas,
        (canvas.width - size) / 2,
        (canvas.height - size) / 2,
        size,
        size,
        0,
        0,
        size,
        size
      );

      this.croppedImage = croppedCanvas.toDataURL('image/jpeg');
    }
  }
};
</script>

响应式裁剪区域

通过监听鼠标事件实现动态选择裁剪区域。

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*">
    <div class="image-container" @mousedown="startDrag" @mousemove="drag" @mouseup="endDrag">
      <img :src="imageSrc" ref="image">
      <div class="crop-box" :style="cropBoxStyle" v-if="isDragging"></div>
    </div>
    <button @click="performCrop">裁剪</button>
    <img :src="croppedResult" v-if="croppedResult">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '',
      isDragging: false,
      startX: 0,
      startY: 0,
      cropWidth: 0,
      cropHeight: 0,
      croppedResult: ''
    };
  },
  computed: {
    cropBoxStyle() {
      return {
        left: `${this.startX}px`,
        top: `${this.startY}px`,
        width: `${this.cropWidth}px`,
        height: `${this.cropHeight}px`
      };
    }
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      if (file) {
        this.imageSrc = URL.createObjectURL(file);
      }
    },
    startDrag(e) {
      this.isDragging = true;
      this.startX = e.offsetX;
      this.startY = e.offsetY;
      this.cropWidth = 0;
      this.cropHeight = 0;
    },
    drag(e) {
      if (this.isDragging) {
        this.cropWidth = e.offsetX - this.startX;
        this.cropHeight = e.offsetY - this.startY;
      }
    },
    endDrag() {
      this.isDragging = false;
    },
    performCrop() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const img = this.$refs.image;

      canvas.width = Math.abs(this.cropWidth);
      canvas.height = Math.abs(this.cropHeight);

      ctx.drawImage(
        img,
        this.startX,
        this.startY,
        this.cropWidth,
        this.cropHeight,
        0,
        0,
        canvas.width,
        canvas.height
      );

      this.croppedResult = canvas.toDataURL('image/jpeg');
    }
  }
};
</script>

<style>
.image-container {
  position: relative;
  display: inline-block;
}
.crop-box {
  position: absolute;
  border: 2px dashed #000;
  background-color: rgba(0,0,0,0.3);
}
</style>

注意事项

• 跨域问题：如果图片来自不同域名，需确保服务器允许跨域或使用代理。
• 性能优化：大图片裁剪前可先压缩或缩小尺寸。
• 移动端适配：触摸事件需替换为 touchstart/touchmove/touchend。
• 格式支持：输出格式可以是 JPEG/PNG，根据需要调整质量参数。

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