vue-cropper中选择图片

vue-cropper 是一个用于图片剪裁的 Vue 组件库，它提供了选择图片的功能。

在使用 vue-cropper 时，你需要安装依赖：

npm install vue-cropper

然后在你的 Vue 组件中引入：

import VueCropper from 'vue-cropper'

在模板中，你可以添加一个 input 元素来选择图片：

<input type="file" ref="fileInput" @change="onFileChange">

在组件中添加一个方法来处理选择图片事件：

onFileChange(event) {
  const file = event.target.files[0]
  if (!file) {
    return
  }
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = () => {
    this.image = reader.result
  }
}

在这个方法中，我们先从 event 获取到用户选择的文件，然后使用 FileReader 将文件转换成 base64 编码的字符串，最后将字符串赋值给组件的 data 中的 image 属性。

接下来，在组件中使用 vue-cropper：

<vue-cropper ref="cropper" :img="image"></vue-cropper>

在模板中，我们将图片绑定到组件的 img 属性上。最后，在选择图片后，我们可以通过以下代码来获取剪裁后的图片：

const cropper = this.$refs.cropper.getCropper()
const croppedImage = cropper.getCroppedCanvas().toDataURL()

这里我们调用 getCropper 方法获取 vue-cropper 的实例，然后调用 getCroppedCanvas 方法获取剪裁后的 canvas 元素，最后调用 toDataURL 方法将 canvas 转换为 base64 编码的字符串。