如何利用vue和Element-plus实现图片的裁剪和旋转功能

<template>  <div>    <el-upload      class="upload-demo"      action="/upload"      :on-change="handleChange"    >      <el-button size="small" type="primary">点击上传图片</el-button>    </el-upload>    <el-image-editor ref="editor" />    <el-button @click="cropImage">裁剪图片</el-button>    <el-button @click="rotateImage">旋转图片</el-button>  </div></template><script>import { ElButton, ElUpload, ElImageEditor } from 'element-plus'export default {  components: {    ElButton,    ElUpload,    ElImageEditor  },  methods: {    handleChange(file) {      // 文件上传成功后的回调函数      console.log(file)    },    cropImage() {      // 进行图片裁剪的逻辑      this.$refs.editor.crop()    },    rotateImage() {      // 进行图片旋转的逻辑      this.$refs.editor.rotate()    }  }}</script><style>.upload-demo {  display: flex;  justify-content: center;  align-items: center;  height: 300px;  width: 300px;  border: 1px dashed #ccc;}</style>

cropImage() {  // 进行图片裁剪的逻辑  this.$refs.editor.crop()}

rotateImage() {  // 进行图片旋转的逻辑  this.$refs.editor.rotate()}