feat: 新增ImageCropping

src/views/Components/ImageCropping.vue

@@ -1,14 +1,25 @@
 <script setup lang="ts">
 import { ContentWrap } from '@/components/ContentWrap'
 import { ImageCropping } from '@/components/ImageCropping'
+import { ref, unref } from 'vue'
+import { ElButton, ElInput } from 'element-plus'
+
+const cropperExpose = ref<InstanceType<typeof ImageCropping>>()
+
+const base64 = ref('')
+
+const getBase64 = () => {
+  base64.value = unref(cropperExpose)?.cropperExpose()?.getCroppedCanvas()?.toDataURL() ?? ''
+}
 </script>
 
 <template>
   <ContentWrap title="图片裁剪">
+    <ElButton type="primary" class="mb-20px" @click="getBase64">裁剪</ElButton>
+    <ElInput v-model="base64" class="mb-20px" type="textarea" />
     <ImageCropping
-      :box-width="350"
-      :box-height="380"
-      image-url="https://images6.alphacoders.com/657/thumbbig-657194.webp"
+      ref="cropperExpose"
+      image-url="https://hips.hearstapps.com/hmg-prod/images/%E5%AE%8B%E6%99%BA%E5%AD%9D-1597774015.jpg?crop=0.500xw:1.00xh;0.500xw,0&resize=640:*"
     />
   </ContentWrap>
 </template>