当前位置：首页 > VUE

vue实现图片裁剪

2026-03-09 22:37:16VUE

使用 vue-cropperjs 实现图片裁剪

安装 vue-cropperjs 依赖包

npm install vue-cropperjs --save

引入组件并注册

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

export default {
  components: {
    VueCropper
  }
}

模板中使用组件

<vue-cropper
  ref="cropper"
  :src="imgSrc"
  :aspectRatio="16/9"
  :viewMode="1"
  :autoCropArea="0.8"
  :guides="true"
  :background="false"
></vue-cropper>

实现基本裁剪功能

设置图片源

data() {
  return {
    imgSrc: '',
    croppedImage: null
  }
}

处理文件上传

handleImageUpload(e) {
  const file = e.target.files[0];
  if (!file.type.includes('image/')) {
    alert('请选择图片文件');
    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 = () => {
      this.croppedImage = reader.result;
    };
    reader.readAsDataURL(blob);
  });
}

添加自定义裁剪选项

设置裁剪比例

setAspectRatio(ratio) {
  this.$refs.cropper.setAspectRatio(ratio);
}

旋转图片

rotate(degrees) {
  this.$refs.cropper.rotate(degrees);
}

缩放图片

zoom(percent) {
  this.$refs.cropper.relativeZoom(percent);
}

响应式处理

监听窗口变化

mounted() {
  window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    this.$refs.cropper && this.$refs.cropper.replace();
  }
}

保存裁剪结果

下载裁剪后的图片

downloadCroppedImage() {
  const link = document.createElement('a');
  link.download = 'cropped-image.png';
  link.href = this.croppedImage;
  link.click();
}

上传到服务器

vue实现图片裁剪

uploadCroppedImage() {
  const formData = new FormData();
  formData.append('image', this.dataURLtoBlob(this.croppedImage));

  axios.post('/upload', formData)
    .then(response => {
      console.log('上传成功', response);
    })
    .catch(error => {
      console.error('上传失败', error);
    });
},
dataURLtoBlob(dataurl) {
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}