From 76336c11119e5474e882849c2befbd118e5dff9a Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Wed, 4 Sep 2024 15:29:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9B=BE=E7=89=87=E8=A3=81?=
 =?UTF-8?q?=E5=89=AA=E6=8F=92=E4=BB=B6=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                         |  1 +
 pnpm-lock.yaml                       |  8 ++++
 src/router/modules/plugin.example.ts |  9 ++++
 src/views/plugin_example/cropper.vue | 61 ++++++++++++++++++++++++++++
 4 files changed, 79 insertions(+)
 create mode 100644 src/views/plugin_example/cropper.vue

diff --git a/package.json b/package.json
index 7a1bc424..21ee2168 100755
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3336ff3d..d885af8d 100755
--- a/pnpm-lock.yaml
+++ b/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
diff --git a/src/router/modules/plugin.example.ts b/src/router/modules/plugin.example.ts
index 76acb20e..33873dd7 100755
--- a/src/router/modules/plugin.example.ts
+++ b/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',
+      },
+    },
   ],
 }
 
diff --git a/src/views/plugin_example/cropper.vue b/src/views/plugin_example/cropper.vue
new file mode 100644
index 00000000..90f8ccf3
--- /dev/null
+++ b/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>