增加图片裁剪插件示例

package.json

@@ -34,6 +34,7 @@
     "animate.css": "^4.1.1",
     "axios": "^1.7.7",
     "bytemd": "^1.21.0",
+    "cropperjs": "^1.6.2",
     "dayjs": "^1.11.13",
     "defu": "^6.1.4",
     "disable-devtool": "^0.3.7",

pnpm-lock.yaml

@@ -56,6 +56,9 @@ importers:
       bytemd:
         specifier: ^1.21.0
         version: 1.21.0
+      cropperjs:
+        specifier: ^1.6.2
+        version: 1.6.2
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
@@ -3236,6 +3239,9 @@ packages:
     resolution: {integrity: sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==}
     engines: {node: '>= 14'}
 
+  cropperjs@1.6.2:
+    resolution: {integrity: sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==}
+
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -10615,6 +10621,8 @@ snapshots:
       crc-32: 1.2.2
       readable-stream: 4.5.2
 
+  cropperjs@1.6.2: {}
+
   cross-spawn@7.0.3:
     dependencies:
       path-key: 3.1.1

src/router/modules/plugin.example.ts

@@ -166,6 +166,15 @@ const routes: RouteRecordRaw = {
         icon: 'i-mdi:file-eye-outline',
       },
     },
+    {
+      path: 'cropper',
+      name: 'pluginExampleCropper',
+      component: () => import('@/views/plugin_example/cropper.vue'),
+      meta: {
+        title: '图片裁剪',
+        icon: 'i-mdi:crop',
+      },
+    },
   ],
 }
 

src/views/plugin_example/cropper.vue

@@ -0,0 +1,61 @@
+<route lang="yaml">
+meta:
+  enabled: false
+</route>
+
+<script lang="ts" setup>
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.css'
+import Alert from './components/alert.vue'
+
+let cropper: any = null
+const imageRef = ref()
+const cropImage = ref('')
+
+onMounted(() => {
+  cropper = new Cropper(imageRef.value, {
+    aspectRatio: 1,
+    viewMode: 1,
+    dragMode: 'move',
+  })
+})
+
+function onCrop() {
+  const canvas = cropper.getCroppedCanvas()
+  cropImage.value = canvas.toDataURL()
+}
+
+function open(url: string) {
+  window.open(url, '_blank')
+}
+</script>
+
+<template>
+  <div>
+    <Alert />
+    <PageHeader title="图片裁剪">
+      <template #content>
+        <p style="margin-bottom: 0;">
+          安装命令：<ElTag>pnpm add cropperjs</ElTag>
+        </p>
+      </template>
+      <ElButton @click="open('https://github.com/fengyuanchen/cropperjs')">
+        <template #icon>
+          <SvgIcon name="i-ep:link" />
+        </template>
+        访问 cropperjs
+      </ElButton>
+    </PageHeader>
+    <PageMain>
+      <div>
+        <img ref="imageRef" src="@/assets/images/logo.png" class="block h-xl w-xl">
+      </div>
+      <HButton @click="onCrop">
+        裁剪
+      </HButton>
+    </PageMain>
+    <PageMain v-if="cropImage">
+      <img :src="cropImage" class="block h-xs w-xs">
+    </PageMain>
+  </div>
+</template>