From 7af56fc53d50b67e3009a362e38aba1b1c4546bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=9D=A4=E9=9B=84?= <1507014442@qq.com>
Date: Tue, 13 May 2025 08:20:54 +0000
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6=E5=9B=BE=E7=89=87=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2=E3=80=81=E5=89=AA=E5=88=87=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈坤雄 <1507014442@qq.com>
---
 package.json                                  |   5 +-
 src/components/upload/CutImageComponent.vue   | 171 ++++++++++++++++++
 .../panel/rightPanel/attrs/changeImage.vue    | 171 ++++++++++++++++++
 .../layouts/panel/rightPanel/setting.vue      |   9 +
 4 files changed, 354 insertions(+), 2 deletions(-)
 create mode 100644 src/components/upload/CutImageComponent.vue
 create mode 100644 src/views/Editor/layouts/panel/rightPanel/attrs/changeImage.vue

diff --git a/package.json b/package.json
index decda5c..bf166ee 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,8 @@
     "tinymce": "^6.8.5",
     "uuid": "^9.0.1",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+     "vue-img-cutter": "^3.0.7",
   },
   "devDependencies": {
     "@arco-design/web-vue": "^2.56.3",
@@ -62,6 +63,6 @@
     "unplugin-vue-components": "^0.25.2",
     "vite": "^4.5.5",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^1.8.27",
   }
 }
diff --git a/src/components/upload/CutImageComponent.vue b/src/components/upload/CutImageComponent.vue
new file mode 100644
index 0000000..20ebaff
--- /dev/null
+++ b/src/components/upload/CutImageComponent.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import Panel from '../../rightPanel/attrs/panel.vue'
+import {useActiveObjectModel} from '@/views/Editor/hooks/useActiveObjectModel'
+import {useEditor} from '@/views/Editor/app'
+import SwipeNumber from '@/components/swipeNumber'
+import type {SelectProps} from '@arco-design/web-vue/es/select'
+import {useColor} from '@/views/Editor/hooks/useActiveObjectColor'
+import {nextTick, ref, watch} from "vue";
+import MAUpload from "@/components/upload/m-a-upload.vue";
+import CutImageComponent from "@/components/upload/CutImageComponent.vue";
+import {isDefined} from "@vueuse/core";
+import {addViewport} from "@leafer-in/viewport";
+const baseUrl = import.meta.env.VITE_UPLOAD_BASE_URL;
+const {canvas,editor} = useEditor()
+const image=ref('');
+const stroke = useActiveObjectModel('stroke')
+const strokeWidth = useActiveObjectModel('strokeWidth')
+const currentImg = ref('');
+const cutImageComponent=ref();
+const imageFileInput = ref(null);
+const editImg = () =>{
+  if(useActiveObjectModel('tag')!=null && useActiveObjectModel('tag').value!=null && useActiveObjectModel('tag').value.modelValue=='Image'){
+    cutImageComponent.value.openModal(useActiveObjectModel('url').value.modelValue)
+  }else {
+    cutImageComponent.value.openModal(useActiveObjectModel('fill').value.modelValue.url)
+  }
+}
+const cutDown = (e) =>{
+  adaptiveImage(e.dataURL)
+}
+const getCurrentImg = () =>{
+  console.log(useActiveObjectModel('tag'));
+  if(useActiveObjectModel('tag')!=null && useActiveObjectModel('tag').value!=null && useActiveObjectModel('tag').value.modelValue=='Image'){
+    currentImg.value=useActiveObjectModel('url').value.modelValue;
+  }else {
+    currentImg.value=useActiveObjectModel('fill').value.modelValue.url;
+  }
+
+}
+watchEffect(() => {
+  const activeObject = editor.activeObject.value;
+  if (isDefined(activeObject) && editor.activeObjectIsType('Image','Image2')) {
+    getCurrentImg();
+  }
+})
+getCurrentImg();
+const fileToBase64 = (file) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (res) => {
+      const base = res.target?.result
+      resolve(base)
+    }
+    reader.onerror = (error) => {
+      reject(error)
+    }
+    reader.readAsDataURL(file)
+  })
+}
+const patternUploadSuccess = (response: any) => {
+  console.log(response);
+  fileToBase64(response.file).then(res =>{
+    adaptiveImage(res);
+  })
+}
+const adaptiveImage = (res) =>{
+  let activeObject = editor.activeObject.value;
+  let orightWidht=null;
+  let orightHeight=null;
+  if(activeObject.tag=='Image2'){
+    if(activeObject.orightWidht!=null && activeObject.orightHeight!=null){
+      orightWidht=activeObject.orightWidht;
+      orightHeight=activeObject.orightHeight;
+    }else{
+      orightWidht=activeObject.width;
+      orightHeight=activeObject.height;
+    }
+
+  }
+  else{
+    if(activeObject.orightWidht!=null && activeObject.orightHeight!=null){
+      orightWidht=activeObject.orightWidht;
+      orightHeight=activeObject.orightHeight;
+    }else{
+      orightWidht=activeObject.width;
+      orightHeight=activeObject.height;
+    }
+  }
+  var img = new Image();
+  img.src = res;
+  img.onload = function() {
+    nextTick(() => {
+      let divWidht=orightWidht;
+      let divHeight=orightHeight;
+      let pImage=img.width/img.height;
+      let dImage=divWidht/divHeight;
+      let finalWidth=divWidht*pImage
+      let finalHeight=divHeight;
+      if(dImage<=pImage){
+        finalWidth=divWidht;
+        finalHeight=divWidht/pImage;
+      }
+      refreshDraw(res,orightHeight,orightWidht,finalWidth,finalHeight);
+    })
+  }
+}
+const refreshDraw = (res,orightHeight,orightWidht,finalWidth,finalHeight) =>{
+  stroke.value.onChange({url:res,orightHeight:orightHeight,orightWidht:orightWidht,height:finalHeight,width:finalWidth})
+  getCurrentImg();
+}
+const uploadImageAction = () =>{
+  if(imageFileInput.value){
+    imageFileInput.value.click();
+  }
+}
+const uploadImage = (event) =>{
+  const file = event.target.files[0];
+  let value= {
+    file:file,
+  }
+  patternUploadSuccess(value);
+}
+</script>
+
+<template>
+    <Panel
+            title="图片预览" hidden-add
+    >
+        <a-space direction="vertical">
+            <a-row :gutter="[4, 4]">
+              <a-col :span="24">
+                <div class="image-container">
+                  <img :src="currentImg">
+                </div>
+              </a-col>
+              <a-col :span="12">
+                <a-button  type="primary" @click="uploadImageAction">
+                  <template #icon>
+                    <icon-upload />
+                  </template>
+                  替换图片
+                </a-button>
+                <input type="file" @change="uploadImage" style="display: none" ref="imageFileInput" accept="image/*"/>
+              </a-col>
+              <a-col :span="12">
+                <a-button type="primary" @click="editImg">
+                  <template #icon>
+                    <icon-image />
+                  </template>
+                  剪切图片
+                </a-button>
+              </a-col>
+            </a-row>
+        </a-space>
+    </Panel>
+  <CutImageComponent ref="cutImageComponent" @cutDown="cutDown"></CutImageComponent>
+</template>
+
+<style scoped lang="less">
+.image-container {
+  width: 100%; /* 或者你想要的任何宽度 */
+  height: 200px; /* 或者你想要的任何高度 */
+}
+
+.image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain; /* 保持宽高比，完整显示图片 */
+  /* 或者使用 cover 来覆盖整个容器，但可能会被裁剪 */
+}
+</style>
diff --git a/src/views/Editor/layouts/panel/rightPanel/attrs/changeImage.vue b/src/views/Editor/layouts/panel/rightPanel/attrs/changeImage.vue
new file mode 100644
index 0000000..82c99d2
--- /dev/null
+++ b/src/views/Editor/layouts/panel/rightPanel/attrs/changeImage.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import Panel from './panel.vue'
+import {useActiveObjectModel} from '@/views/Editor/hooks/useActiveObjectModel'
+import {useEditor} from '@/views/Editor/app'
+import SwipeNumber from '@/components/swipeNumber'
+import type {SelectProps} from '@arco-design/web-vue/es/select'
+import {useColor} from '@/views/Editor/hooks/useActiveObjectColor'
+import {nextTick, ref, watch} from "vue";
+import MAUpload from "@/components/upload/m-a-upload.vue";
+import CutImageComponent from "@/components/upload/CutImageComponent.vue";
+import {isDefined} from "@vueuse/core";
+import {addViewport} from "@leafer-in/viewport";
+const baseUrl = import.meta.env.VITE_UPLOAD_BASE_URL;
+const {canvas,editor} = useEditor()
+const image=ref('');
+const stroke = useActiveObjectModel('stroke')
+const strokeWidth = useActiveObjectModel('strokeWidth')
+const currentImg = ref('');
+const cutImageComponent=ref();
+const imageFileInput = ref(null);
+const editImg = () =>{
+  if(useActiveObjectModel('tag')!=null && useActiveObjectModel('tag').value!=null && useActiveObjectModel('tag').value.modelValue=='Image'){
+    cutImageComponent.value.openModal(useActiveObjectModel('url').value.modelValue)
+  }else {
+    cutImageComponent.value.openModal(useActiveObjectModel('fill').value.modelValue.url)
+  }
+}
+const cutDown = (e) =>{
+  adaptiveImage(e.dataURL)
+}
+const getCurrentImg = () =>{
+  console.log(useActiveObjectModel('tag'));
+  if(useActiveObjectModel('tag')!=null && useActiveObjectModel('tag').value!=null && useActiveObjectModel('tag').value.modelValue=='Image'){
+    currentImg.value=useActiveObjectModel('url').value.modelValue;
+  }else {
+    currentImg.value=useActiveObjectModel('fill').value.modelValue.url;
+  }
+
+}
+watchEffect(() => {
+  const activeObject = editor.activeObject.value;
+  if (isDefined(activeObject) && editor.activeObjectIsType('Image','Image2')) {
+    getCurrentImg();
+  }
+})
+getCurrentImg();
+const fileToBase64 = (file) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (res) => {
+      const base = res.target?.result
+      resolve(base)
+    }
+    reader.onerror = (error) => {
+      reject(error)
+    }
+    reader.readAsDataURL(file)
+  })
+}
+const patternUploadSuccess = (response: any) => {
+  console.log(response);
+  fileToBase64(response.file).then(res =>{
+    adaptiveImage(res);
+  })
+}
+const adaptiveImage = (res) =>{
+  let activeObject = editor.activeObject.value;
+  let orightWidht=null;
+  let orightHeight=null;
+  if(activeObject.tag=='Image2'){
+    if(activeObject.orightWidht!=null && activeObject.orightHeight!=null){
+      orightWidht=activeObject.orightWidht;
+      orightHeight=activeObject.orightHeight;
+    }else{
+      orightWidht=activeObject.width;
+      orightHeight=activeObject.height;
+    }
+
+  }
+  else{
+    if(activeObject.orightWidht!=null && activeObject.orightHeight!=null){
+      orightWidht=activeObject.orightWidht;
+      orightHeight=activeObject.orightHeight;
+    }else{
+      orightWidht=activeObject.width;
+      orightHeight=activeObject.height;
+    }
+  }
+  var img = new Image();
+  img.src = res;
+  img.onload = function() {
+    nextTick(() => {
+      let divWidht=orightWidht;
+      let divHeight=orightHeight;
+      let pImage=img.width/img.height;
+      let dImage=divWidht/divHeight;
+      let finalWidth=divWidht*pImage
+      let finalHeight=divHeight;
+      if(dImage<=pImage){
+        finalWidth=divWidht;
+        finalHeight=divWidht/pImage;
+      }
+      refreshDraw(res,orightHeight,orightWidht,finalWidth,finalHeight);
+    })
+  }
+}
+const refreshDraw = (res,orightHeight,orightWidht,finalWidth,finalHeight) =>{
+  stroke.value.onChange({url:res,orightHeight:orightHeight,orightWidht:orightWidht,height:finalHeight,width:finalWidth})
+  getCurrentImg();
+}
+const uploadImageAction = () =>{
+  if(imageFileInput.value){
+    imageFileInput.value.click();
+  }
+}
+const uploadImage = (event) =>{
+  const file = event.target.files[0];
+  let value= {
+    file:file,
+  }
+  patternUploadSuccess(value);
+}
+</script>
+
+<template>
+    <Panel
+            title="图片预览" hidden-add
+    >
+        <a-space direction="vertical">
+            <a-row :gutter="[4, 4]">
+              <a-col :span="24">
+                <div class="image-container">
+                  <img :src="currentImg">
+                </div>
+              </a-col>
+              <a-col :span="12">
+                <a-button  type="primary" @click="uploadImageAction">
+                  <template #icon>
+                    <icon-upload />
+                  </template>
+                  替换图片
+                </a-button>
+                <input type="file" @change="uploadImage" style="display: none" ref="imageFileInput" accept="image/*"/>
+              </a-col>
+              <a-col :span="12">
+                <a-button type="primary" @click="editImg">
+                  <template #icon>
+                    <icon-image />
+                  </template>
+                  剪切图片
+                </a-button>
+              </a-col>
+            </a-row>
+        </a-space>
+    </Panel>
+  <CutImageComponent ref="cutImageComponent" @cutDown="cutDown"></CutImageComponent>
+</template>
+
+<style scoped lang="less">
+.image-container {
+  width: 100%; /* 或者你想要的任何宽度 */
+  height: 200px; /* 或者你想要的任何高度 */
+}
+
+.image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain; /* 保持宽高比，完整显示图片 */
+  /* 或者使用 cover 来覆盖整个容器，但可能会被裁剪 */
+}
+</style>
diff --git a/src/views/Editor/layouts/panel/rightPanel/setting.vue b/src/views/Editor/layouts/panel/rightPanel/setting.vue
index 49f4793..f50f616 100644
--- a/src/views/Editor/layouts/panel/rightPanel/setting.vue
+++ b/src/views/Editor/layouts/panel/rightPanel/setting.vue
@@ -15,6 +15,7 @@ import QrcodeAttr from "./attrs/qrcodeAttr.vue";
 import BarcodeAttr from "./attrs/barcodeAttr.vue";
 import GroupAttr from "./attrs/groupAttr.vue";
 import PenAttr from "./attrs/penAttr.vue";
+import changeImage from "./attrs/changeImage.vue";
 import {appInstance, useEditor} from "@/views/Editor/app";
 import {typeUtil} from "@/views/Editor/utils/utils";
 import {useAppStore} from "@/store";
@@ -71,6 +72,14 @@ const componentList = computed(() => {
             component: HtmlTextAttr,
             visual: isDefined(activeObject) && editor.activeObjectIsType('HTMLText'),
         },
+        {
+          name: 'changeImage',
+          component: changeImage,
+          visual:
+              isDefined(activeObject)
+              &&!typeUtil.isVirtualOrBottom(activeObject)
+              && editor.activeObjectIsType('Image','Image2')
+        },
         {
             name: 'QrcodeAttr',
             component: QrcodeAttr,
-- 
Gitee