Vue中如何实现图片的裁剪和旋转？

npm install vue-cropper vue-rotate --save

// MyComponent.vue<template>  <div>    <vue-cropper      ref="cropper"      :img="imgSrc"      :output-type="outputType"      :can-zoom="canZoom"      :can-move="canMove"      :center-box="centerBox"      :show-remove-btn="showRemoveBtn"      :support-ratio="supportRatio"      :fixed-ratio="fixedRatio"    ></vue-cropper>    <button @click="crop">裁剪</button>  </div></template><script>import VueCropper from 'vue-cropper';export default {  components: {    VueCropper  },  data() {    return {      imgSrc: '', // 图片路径      outputType: 'jpeg', // 输出类型      canZoom: true, // 是否可以缩放      canMove: true, // 是否可以移动      centerBox: true, // 是否居中显示      showRemoveBtn: true, // 是否显示删除按钮      supportRatio: [], // 图片比例限制      fixedRatio: false // 是否固定比例    }  },  methods: {    crop() {      const croppedData = this.$refs.cropper.getCroppedCanvas().toDataURL(); // 获取裁剪后的图片数据      // 处理裁剪后的图片数据    }  }};</script>

// MyComponent.vue<template>  <div>    @@##@@    <button @click="rotate">旋转</button>  </div></template><script>import VueRotate from 'vue-rotate';export default {  directives: {    Rotate: VueRotate  },  data() {    return {      imgSrc: '', // 图片路径      rotatedDegree: 0 // 旋转角度    }  },  methods: {    rotate() {      this.rotatedDegree += 90; // 每次点击旋转90度    }  }};</script>