vue-cropper保存裁剪后的图片

对于vue-cropper，可以通过以下步骤保存裁剪后的图片：

1. 在vue组件中引入vue-cropper组件，并设置相应的props。
2. 在模板中使用vue-cropper组件，并设置相应的事件监听器。
3. 在事件监听器中调用vue-cropper组件的getCroppedCanvas()方法获取裁剪后的canvas对象。
4. 将canvas对象转化为图片文件，并上传到服务器或本地存储。

下面是一个简单的示例代码：

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :src="imgSrc"
      :aspect-ratio="1"
      :view-mode="1"
      :drag-mode="cropType"
      :auto-crop-area="0.8"
      :guides="false"
      :background="false"
      :rotatable="false"
      :scalable="false"
      :crop-box-movable="false"
      :crop-box-resizable="false"
      :crop="onCrop"
      :ready="onReady"
    />
    <button @click="saveImage">保存</button>
  </div>
</template>

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

export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      imgSrc: '',
      cropType: 'crop',
    };
  },
  methods: {
    onCrop(event) {
      console.log('crop', event);
    },
    onReady(event) {
      console.log('ready', event);
    },
    saveImage() {
      const cropper = this.$refs.cropper;
      const canvas = cropper.getCroppedCanvas();
      canvas.toBlob((blob) => {
        // 将blob上传到服务器或者本地存储
        // ...
      });
    },
  },
};
</script>

在这个示例中，我们使用了vue-cropper组件，并设置了一些props和事件监听器。在saveImage()方法中，我们调用了vue-cropper组件的getCroppedCanvas()方法，将裁剪后的canvas对象转化为图片文件，并进行了上传或者存储。