From 2bbdfaaa0cb1107cbddc19557273e20279bc117c Mon Sep 17 00:00:00 2001
From: x007xyz <1026161550@qq.com>
Date: Fri, 15 Nov 2024 08:48:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E7=89=87):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E8=A3=81=E5=89=AA=E5=8A=9F=E8=83=BD=20(#543)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(图片): 添加图片裁剪功能

* fix: 图片裁剪兼容本地图片不存在src的情况

* chore: 裁剪细节调整
---
 .eslintrc-auto-import.json       |   2 +-
 .vscode/settings.json            |   5 +-
 package.json                     |   1 +
 src/components/cropperDialog.vue | 290 +++++++++++++++++++++++++++++++
 src/components/cropperImg.vue    |  89 ++++++++++
 src/language/zh.json             |   3 +-
 src/views/home/index.vue         |  10 ++
 7 files changed, 397 insertions(+), 3 deletions(-)
 create mode 100644 src/components/cropperDialog.vue
 create mode 100644 src/components/cropperImg.vue

diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index a9f62599..80862845 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -71,4 +71,4 @@
     "watchPostEffect": true,
     "watchSyncEffect": true
   }
-}
\ No newline at end of file
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index fb5f9ac5..0641a795 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,5 +11,8 @@
         "src/language"
     ],
     "i18n-ally.sourceLanguage": "zh",
-    "i18n-ally.keystyle": "nested" // 需要Prettier的配置文件
+    "i18n-ally.keystyle": "nested",
+    "[vue]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    } // 需要Prettier的配置文件
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index d51c0b93..a12b5d35 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "view-ui-plus": "^1.3.7",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.2.25",
+    "vue-cropper": "^1.1.4",
     "vue-i18n": "9.0.0",
     "vue-masonry": "^0.16.0",
     "vue-router": "^4.0.16",
diff --git a/src/components/cropperDialog.vue b/src/components/cropperDialog.vue
new file mode 100644
index 00000000..826ae03d
--- /dev/null
+++ b/src/components/cropperDialog.vue
@@ -0,0 +1,290 @@
+<template>
+  <Modal
+    v-model="visible"
+    @on-ok="onOk"
+    @on-cancel="onCancel"
+    title="图片裁剪"
+    width="80%"
+    style="height: 80%"
+  >
+    <div class="main">
+      <Spin size="large" fix :show="loading">图片加载中...</Spin>
+      <div class="options">
+        <label>裁剪比例</label>
+        <div class="flex mt-2 ratio-item-wrapper">
+          <div class="ratio-item" :class="{ active: !fixed }" @click="changeRatio()">自由</div>
+          <div
+            class="ratio-item"
+            :class="{ active: fixed && fixedRatio[0] === 1 && fixedRatio[1] === 1 }"
+            @click="changeRatio([1, 1])"
+          >
+            <div class="ratio-item-content" style="height: 70px; width: 70px">1:1</div>
+          </div>
+          <div
+            class="ratio-item"
+            :class="{ active: fixed && fixedRatio[0] === 2 && fixedRatio[1] === 3 }"
+            @click="changeRatio([2, 3])"
+          >
+            <div class="ratio-item-content" style="height: 70px; width: calc(70px * 2 / 3)">
+              2:3
+            </div>
+          </div>
+          <div
+            class="ratio-item"
+            :class="{ active: fixed && fixedRatio[0] === 3 && fixedRatio[1] === 2 }"
+            @click="changeRatio([3, 2])"
+          >
+            <div class="ratio-item-content" style="height: calc(70px * 2 / 3); width: 70px">
+              3:2
+            </div>
+          </div>
+          <div
+            class="ratio-item"
+            :class="{ active: fixed && fixedRatio[0] === 4 && fixedRatio[1] === 3 }"
+            @click="changeRatio([4, 3])"
+          >
+            <div class="ratio-item-content" style="height: calc(70px * 3 / 4); width: 70px">
+              4:3
+            </div>
+          </div>
+          <div
+            class="ratio-item"
+            :class="{ active: fixed && fixedRatio[0] === 3 && fixedRatio[1] === 4 }"
+            @click="changeRatio([3, 4])"
+          >
+            <div class="ratio-item-content" style="width: calc(70px * 3 / 4); height: 70px">
+              3:4
+            </div>
+          </div>
+          <div
+            class="ratio-item"
+            :class="{ active: fixed && fixedRatio[0] === 16 && fixedRatio[1] === 9 }"
+            @click="changeRatio([16, 9])"
+          >
+            <div class="ratio-item-content" style="height: calc(70px * 9 / 16); width: 70px">
+              16:9
+            </div>
+          </div>
+          <div
+            class="ratio-item"
+            :class="{ active: fixed && fixedRatio[0] === 9 && fixedRatio[1] === 16 }"
+            @click="changeRatio([9, 16])"
+          >
+            <div class="ratio-item-content" style="width: calc(70px * 9 / 16); height: 70px">
+              9:16
+            </div>
+          </div>
+        </div>
+        <label>当前尺寸</label>
+        <div class="flex mt-2">
+          <Input
+            v-model="cropperWidth"
+            type="number"
+            @change="changeCropperSize('width', Number($event.target.value))"
+          />
+          <span class="mx-2">X</span>
+          <Input
+            v-model="cropperHeight"
+            type="number"
+            @change="changeCropperSize('height', Number($event.target.value))"
+          />
+        </div>
+      </div>
+      <div class="cropper-wrapper">
+        <VueCropper
+          ref="cropperRef"
+          :img="img"
+          :outputSize="1"
+          outputType="png"
+          autoCrop
+          :fixed="fixed"
+          :fixedNumber="fixedRatio"
+          centerBox
+          :fixedBox="false"
+          full
+          @realTime="onPreview"
+        />
+      </div>
+      <div class="preview-wrapper">
+        <div
+          style="height: 100px; width: 100px; border: 1px solid rgba(59, 130, 246, 0.5)"
+          :style="previewStyle"
+        >
+          <div :style="previews.div" v-if="previews">
+            <img :src="previews.url" :style="{ ...previews.img, maxWidth: previews.img.width }" />
+          </div>
+        </div>
+
+        <div class="title">预览</div>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import 'vue-cropper/dist/index.css';
+import { VueCropper } from 'vue-cropper';
+// import { blobToFile } from '../../views/creation/createShortVideo/components/framesContent/utils'
+
+const visible = ref(false);
+
+const cropperRef = ref();
+
+const img = ref();
+
+const previewStyle = ref({
+  width: '100px',
+  height: '100px',
+  overflow: 'hidden',
+  margin: '0',
+});
+
+const loading = ref(false);
+
+const previews = ref();
+
+const cropperWidth = ref(0);
+const cropperHeight = ref(0);
+
+function changeCropperSize(type: 'width' | 'height', value: number) {
+  if (fixed.value) {
+    if (type === 'width') {
+      cropperHeight.value = (value * fixedRatio.value[1]) / fixedRatio.value[0];
+    } else {
+      cropperWidth.value = (value * fixedRatio.value[0]) / fixedRatio.value[1];
+    }
+  }
+  nextTick(() => {
+    cropperRef.value.goAutoCrop(Number(cropperWidth.value), Number(cropperHeight.value));
+  });
+}
+
+function onPreview(_previews) {
+  if (_previews.w === 0 && _previews.h === 0) {
+    loading.value = true;
+  } else {
+    loading.value = false;
+  }
+  console.log('🚀 ~ onPreview ~ _previews:', _previews);
+  cropperWidth.value = _previews.w;
+  cropperHeight.value = _previews.h;
+  previewStyle.value = {
+    width: _previews.w + 'px',
+    height: _previews.h + 'px',
+    overflow: 'hidden',
+    margin: '0',
+    zoom: 100 / _previews.w,
+  };
+
+  previews.value = _previews;
+}
+
+function onCancel() {
+  visible.value = false;
+}
+const fixedRatio = ref([1, 1]);
+const fixed = ref(false);
+function changeRatio(ratio?: [number, number]) {
+  if (ratio) {
+    fixed.value = true;
+    fixedRatio.value = ratio;
+    // 宽度不变，按照比例修改高度
+    // cropperHeight.value = (cropperWidth.value * ratio[1]) / ratio[0];
+  } else {
+    fixed.value = false;
+  }
+  nextTick(() => {
+    cropperRef.value.goAutoCrop(9999, 9999);
+  });
+}
+
+let _callback = null;
+function onOk() {
+  cropperRef.value.getCropData((data) => {
+    _callback && _callback(data);
+    visible.value = false;
+  });
+}
+
+defineExpose({
+  open(data, callback) {
+    img.value = data.img;
+    _callback = callback;
+    visible.value = true;
+  },
+});
+</script>
+
+<style scoped lang="less">
+.main {
+  display: flex;
+  align-items: stretch;
+  min-height: 600px;
+  position: relative;
+}
+
+.options {
+  width: 256px;
+  .mt-2 {
+    margin-top: 8px;
+  }
+  .flex {
+    display: flex;
+    align-items: center;
+  }
+  .mx-2 {
+    margin: 0 8px;
+  }
+}
+
+.cropper-wrapper {
+  flex: 1;
+  min-height: 100%;
+  padding: 0 16px;
+}
+
+.title {
+  text-align: center;
+  font-size: 14px;
+  color: #0a0a15;
+  margin-top: 12px;
+}
+
+.ratio-item-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.ratio-item {
+  width: 80px;
+  height: 80px;
+  // border: 1px solid #99999f;
+  background-color: #fcfcfc;
+  border-radius: 4px;
+  text-align: center;
+  line-height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &.active {
+    border: 1px solid #2d8cf0;
+  }
+}
+
+.ratio-item-content {
+  background-color: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.preview-wrapper {
+  width: 100px;
+}
+</style>
diff --git a/src/components/cropperImg.vue b/src/components/cropperImg.vue
new file mode 100644
index 00000000..2aa5d802
--- /dev/null
+++ b/src/components/cropperImg.vue
@@ -0,0 +1,89 @@
+<template>
+  <div v-if="isOne && type === 'image'" class="attr-item-box">
+    <div class="bg-item">
+      <Button @click="cropper" type="text" long>{{ $t('cropperImg') }}</Button>
+    </div>
+  </div>
+  <cropperDialog ref="cropperDialogRef"></cropperDialog>
+</template>
+
+<script setup name="CropperImg">
+import useSelect from '@/hooks/select';
+
+import cropperDialog from '@/components/cropperDialog.vue';
+import { Utils } from '@kuaitu/core';
+const { insertImgFile } = Utils;
+
+const update = getCurrentInstance();
+// const canvasEditor = inject('canvasEditor');
+const { canvasEditor, isOne } = useSelect();
+const type = ref('');
+const cropperDialogRef = ref();
+const cropper = () => {
+  console.log('🚀 ~ cropper ~ cropper:');
+  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
+  if (activeObject && activeObject.type === 'image') {
+    console.log('🚀 ~ cropper ~ activeObject:', activeObject);
+    cropperDialogRef.value.open({ img: activeObject._element.src }, async (data) => {
+      console.log('🚀 ~ cropper ~ data:', data);
+      const imgEl = await insertImgFile(data);
+      // const width = activeObject.get('width');
+      // const height = activeObject.get('height');
+      // const scaleX = activeObject.get('scaleX');
+      // const scaleY = activeObject.get('scaleY');
+      // console.log('🚀 ~ cropper ~ scaleX:', scaleX);
+      // console.log('🚀 ~ cropper ~ scaleY:', scaleY);
+      activeObject.setSrc(imgEl.src, () => {
+        // activeObject.set('scaleX', scaleX);
+        // activeObject.set('scaleY', scaleY);
+        canvasEditor.canvas.renderAll();
+      });
+      imgEl.remove();
+    });
+  }
+};
+
+// 替换图片
+// const repleace = async () => {
+//   const activeObject = canvasEditor.canvas.getActiveObjects()[0];
+//   if (activeObject && activeObject.type === 'image') {
+//     // 图片
+//     const [file] = await selectFiles({ accept: 'image/*', multiple: false });
+//     // 转字符串
+//     const fileStr = await getImgStr(file);
+//     // 字符串转El
+//     const imgEl = await insertImgFile(fileStr);
+//     const width = activeObject.get('width');
+//     const height = activeObject.get('height');
+//     const scaleX = activeObject.get('scaleX');
+//     const scaleY = activeObject.get('scaleY');
+//     activeObject.setSrc(imgEl.src, () => {
+//       activeObject.set('scaleX', (width * scaleX) / imgEl.width);
+//       activeObject.set('scaleY', (height * scaleY) / imgEl.height);
+//       canvasEditor.canvas.renderAll();
+//     });
+//     imgEl.remove();
+//   }
+// };
+
+const init = () => {
+  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
+  if (activeObject) {
+    type.value = activeObject.type;
+    update?.proxy?.$forceUpdate();
+  }
+};
+
+onMounted(() => {
+  canvasEditor.on('selectOne', init);
+});
+
+onBeforeUnmount(() => {
+  canvasEditor.off('selectOne', init);
+});
+</script>
+<style lang="less" scoped>
+.attr-item-box {
+  margin-top: 8px;
+}
+</style>
diff --git a/src/language/zh.json b/src/language/zh.json
index 628272d3..143fc750 100644
--- a/src/language/zh.json
+++ b/src/language/zh.json
@@ -91,6 +91,7 @@
   },
   "select_json": "选择JSON文件",
   "repleaceImg": "替换图片",
+  "cropperImg": "裁剪图片",
   "createClip": "添加裁切",
   "removeClip": "移除裁切",
   "polygonClip": "多边形",
@@ -258,4 +259,4 @@
   },
   "mine": "我的",
   "batch": "批量"
-}
+}
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index b53039c2..910b711c 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -125,6 +125,8 @@
               <center-align></center-align>
               <!-- 替换图片 -->
               <replaceImg></replaceImg>
+              <!-- 裁剪图片 -->
+              <cropperImg></cropperImg>
               <!-- 图片裁切 -->
               <clip-image></clip-image>
               <!-- 翻转 -->
@@ -210,6 +212,7 @@ import material from '@/components/material.vue';
 import bgBar from '@/components/bgBar.vue';
 import setSize from '@/components/setSize.vue';
 import replaceImg from '@/components/replaceImg.vue';
+import cropperImg from '@/components/cropperImg.vue';
 import filters from '@/components/filters.vue';
 import imgStroke from '@/components/imgStroke.vue';
 // import elementData from '@/components/elementData.vue';
@@ -451,6 +454,7 @@ provide('canvasEditor', canvasEditor);
     width: 380px;
   }
 }
+
 // 右侧容器
 .right-bar {
   width: 304px;
@@ -507,6 +511,7 @@ provide('canvasEditor', canvasEditor);
   border-radius: 4px;
   display: flex;
   align-items: center;
+
   .ivu-tooltip {
     text-align: center;
     flex: 1;
@@ -539,11 +544,13 @@ provide('canvasEditor', canvasEditor);
 .right {
   display: flex;
   align-items: center;
+
   img {
     display: block;
     margin-right: 10px;
   }
 }
+
 .home,
 .ivu-layout {
   height: 100vh;
@@ -556,6 +563,7 @@ provide('canvasEditor', canvasEditor);
 .canvas-box {
   position: relative;
 }
+
 // 画布内阴影
 .inside-shadow {
   position: absolute;
@@ -591,10 +599,12 @@ provide('canvasEditor', canvasEditor);
 .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
   background: none;
 }
+
 // 标尺
 .switch {
   margin-right: 10px;
 }
+
 // 网格背景
 .design-stage-grid {
   --offsetX: 0px;