当前位置：首页 > VUE

vue实现图片裁剪上传

2026-01-20 18:16:35VUE

Vue 实现图片裁剪上传的方法

使用 vue-cropper 库

安装 vue-cropper 库：

npm install vue-cropperjs

引入组件并设置基本配置：

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

export default {
  components: { VueCropper },
  data() {
    return {
      imgSrc: '',
      cropImg: '',
      cropper: null,
      options: {
        aspectRatio: 1, // 裁剪比例
        viewMode: 1,
        autoCropArea: 0.8,
        movable: true,
        zoomable: true,
        scalable: true,
      }
    }
  }
}

模板结构：

<template>
  <div>
    <input type="file" @change="uploadImg" accept="image/*">
    <vue-cropper
      ref="cropper"
      :src="imgSrc"
      :ready="cropImage"
      :options="options"
    ></vue-cropper>
    <button @click="crop">裁剪</button>
    <img :src="cropImg" v-if="cropImg">
  </div>
</template>

方法实现：

methods: {
  uploadImg(e) {
    const file = e.target.files[0];
    if (!file.type.includes('image/')) {
      return alert('请选择图片文件');
    }
    const reader = new FileReader();
    reader.onload = (event) => {
      this.imgSrc = event.target.result;
      this.$refs.cropper.replace(event.target.result);
    };
    reader.readAsDataURL(file);
  },
  cropImage() {
    this.cropper = this.$refs.cropper.cropper;
  },
  crop() {
    this.cropImg = this.cropper.getCroppedCanvas().toDataURL();
    this.uploadToServer();
  },
  uploadToServer() {
    const blob = this.dataURItoBlob(this.cropImg);
    const formData = new FormData();
    formData.append('file', blob, 'cropped.jpg');
    // 这里添加上传逻辑
  },
  dataURItoBlob(dataURI) {
    const byteString = atob(dataURI.split(',')[1]);
    const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    const ab = new ArrayBuffer(byteString.length);
    const ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: mimeString });
  }
}

使用其他方案

对于需要更简单实现的场景，可以考虑使用现成的 UI 库：

npm install vue-avatar-cropper

基本用法：

import VueAvatarCropper from 'vue-avatar-cropper'

export default {
  components: { VueAvatarCropper },
  methods: {
    onCropped(data) {
      this.avatar = data;
      // 上传逻辑
    }
  }
}

模板：

<vue-avatar-cropper
  @uploaded="onCropped"
  trigger="#select-btn"
  upload-url="/api/upload"
></vue-avatar-cropper>
<button id="select-btn">选择图片</button>

自定义实现方案

对于不希望依赖第三方库的情况，可以结合 Canvas API 实现：

文件选择和预览：

handleFileSelect(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = (e) => {
    this.originalImage = new Image();
    this.originalImage.src = e.target.result;
    this.initCanvas();
  };
  reader.readAsDataURL(file);
}

Canvas 初始化：

initCanvas() {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext('2d');
  canvas.width = this.originalImage.width;
  canvas.height = this.originalImage.height;
  ctx.drawImage(this.originalImage, 0, 0);
}

裁剪功能：

cropImage() {
  const canvas = this.$refs.canvas;
  const croppedCanvas = document.createElement('canvas');
  const ctx = croppedCanvas.getContext('2d');

  croppedCanvas.width = this.cropWidth;
  croppedCanvas.height = this.cropHeight;

  ctx.drawImage(
    canvas,
    this.cropX, this.cropY, this.cropWidth, this.cropHeight,
    0, 0, this.cropWidth, this.cropHeight
  );

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