vue2实现图片裁剪功能

要实现图片裁剪功能，可以使用vue-cropper组件。下面是一个简单的实现步骤：

1. 安装vue-cropper组件

npm install vue-cropper --save

2. 在Vue组件中引入vue-cropper

import VueCropper from 'vue-cropper'

3. 在组件中使用vue-cropper组件，并设置相应的属性

<vue-cropper
  ref="cropper"
  :guides="false"
  :view-mode="1"
  :auto-crop-area="0.8"
  :background="false"
  :zoomable="false"
  :rotatable="false"
  :scalable="false"
  :src="imgSrc"
></vue-cropper>

4. 在methods中定义裁剪函数

cropImg() {
  this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
    const formData = new FormData()
    formData.append('file', blob, 'avatar.jpg')
    // 发送formData到后端处理
  })
}

5. 在template中添加裁剪按钮，并绑定裁剪函数

<button @click="cropImg">裁剪图片</button>

以上是一个简单的vue2实现图片裁剪功能的步骤。当然，vue-cropper的属性和方法还有很多，可以根据具体需求进行调整。