Signed-off-by: 吴文峰 <kevin@lmve.net>

frontent/ops_vue_js/package-lock.json

@@ -8,6 +8,17 @@
       "name": "ops_vue_js",
       "version": "0.0.0",
       "dependencies": {
+        "@cropper/element": "^2.1.0",
+        "@cropper/element-canvas": "^2.1.0",
+        "@cropper/element-crosshair": "^2.1.0",
+        "@cropper/element-grid": "^2.1.0",
+        "@cropper/element-handle": "^2.1.0",
+        "@cropper/element-image": "^2.1.0",
+        "@cropper/element-selection": "^2.1.0",
+        "@cropper/element-shade": "^2.1.0",
+        "@cropper/element-viewer": "^2.1.0",
+        "@cropper/elements": "^2.1.0",
+        "@cropper/utils": "^2.1.0",
         "@fullcalendar/core": "^6.1.19",
         "@fullcalendar/daygrid": "^6.1.19",
         "@fullcalendar/interaction": "^6.1.19",
@@ -67,6 +78,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1065,6 +1077,7 @@
       "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.19.tgz",
       "integrity": "sha512-z0aVlO5e4Wah6p6mouM0UEqtRf1MZZPt4mwzEyU6kusaNL+dlWQgAasF2cK23hwT4cmxkEmr4inULXgpyeExdQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "preact": "~10.12.1"
       }
@@ -1533,6 +1546,7 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -2260,6 +2274,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -3404,6 +3419,7 @@
       "integrity": "sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@bufbuild/protobuf": "^2.5.0",
         "buffer-builder": "^0.2.0",
@@ -3950,6 +3966,7 @@
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -4128,6 +4145,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.24.tgz",
       "integrity": "sha512-uTHDOpVQTMjcGgrqFPSb8iO2m1DUvo+WbGqoXQz8Y1CeBYQ0FXf2z1gLRaBtHjlRz7zZUBHxjVB5VTLzYkvftg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.24",
         "@vue/compiler-sfc": "3.5.24",

frontent/ops_vue_js/package.json

@@ -12,6 +12,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@cropper/element": "^2.1.0",
+    "@cropper/element-canvas": "^2.1.0",
+    "@cropper/element-crosshair": "^2.1.0",
+    "@cropper/element-grid": "^2.1.0",
+    "@cropper/element-handle": "^2.1.0",
+    "@cropper/element-image": "^2.1.0",
+    "@cropper/element-selection": "^2.1.0",
+    "@cropper/element-shade": "^2.1.0",
+    "@cropper/element-viewer": "^2.1.0",
+    "@cropper/elements": "^2.1.0",
+    "@cropper/utils": "^2.1.0",
     "@fullcalendar/core": "^6.1.19",
     "@fullcalendar/daygrid": "^6.1.19",
     "@fullcalendar/interaction": "^6.1.19",

frontent/ops_vue_js/src/components/imageCropper.vue

@@ -1,297 +1,56 @@
 <script setup>
 
+
 import { Modal } from "@tabler/core";
 import { onMounted, ref } from "vue";
 
-import  "@/libs/cropper.min.js"
+import Cropper from 'cropperjs';
 
 
-const avata_toolt=ref()
+const image = new Image();
+image.src = "https://wnfed.com/usr/uploads/2020/07/736937178.jpg";
+image.alt = 'Picture';
 
-const avatar_toolt_moda=ref()
+const imagecroppert=ref()
 
-const cropper=ref()
+const cropper = ref(null);
 
- const image = document.getElementById('cropper-image');
-  // 初始化Cropper
-  function initCropper(imageSrc) {
-    if (cropper.value) {
-      cropper.value.destroy();
-    }
-
-    image.src = imageSrc;
-    cropper.value = new Cropper(image, {
-      aspectRatio: 1,
-      viewMode: 2,
-      autoCropArea: 0.8,
-      zoomable: true,
-      zoomOnWheel: true,
-      zoomOnTouch: true,
-      wheelZoomRatio: 0.1,
-      //minCanvasWidth: 400,
-      //minCanvasHeight: 400,
-      crop: updatePreview,
-      ready() {
-       
-       
-      }
-    });
-  }
-
-  function inputfile(e){
-    const file = e.target.files[0];
-    if (!file) return;
-
-    if (!file.type.startsWith('image/')) {
-      showMessage('⚠️ 请选择有效的图片文件', 'error');
-      return;
-    }
-
-    const reader = new FileReader();
-    reader.onload = () => {
-      initCropper(reader.result);
-      currentScale = 1;
-    };
-    reader.readAsDataURL(file);
-  }
 
 onMounted(()=>{
-  //console.log(avata_toolt)
-  avatar_toolt_moda.value=new Modal(avata_toolt.value)
-  avatar_toolt_moda.value.show()
-})
 
+      cropper.value = new Cropper(image, {
+      container: imagecroppert.value,
+      aspectRatio: 1,
+      viewMode: 2,
+      
+
+    });
+
+    //cropper.value.
+    console.log(cropper.value)
+
+
+
+})
 
 </script>
 
 <template>
 
-  <div class="modal modal-blur fade" ref="avata_toolt" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="cropper-container" ref="imagecroppert"></div>
-  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
-    <div class="modal-content">
-      <div class="container">
-        <h1>头像裁剪工具</h1>
 
-        <div class="flex-wrapper">
-          <!-- 左侧裁剪区 -->
-          <div class="crop-section">
-            <div id="image-wrapper">
-              <img id="cropper-image"
-                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
-            </div>
-            <!-- 上传进度 -->
-            <div class="progress-container">
-              <div class="progress-bar"></div>
-            </div>
-
-            <!-- 消息提示 -->
-            <div id="message" class="alertavater"></div>
-
-            <div class="preview-stats">
-              <!-- <p>当前缩放: <span id="zoomValue">100%</span></p> -->
-              <p>图片尺寸: <span id="imageSize">0 x 0</span></p>
-            </div>
-          </div>
-
-          <!-- 右侧预览区 -->
-          <div class="preview-section">
-            <h3>实时预览</h3>
-            <div class="preview-box">
-              <img id="preview-img"
-                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
-            </div>
-
-            <!-- 控制按钮 -->
-            <div class="controls">
-              <label class="btn btn-primary">
-                📁 选择图片
-                <input type="file" accept="image/*" @change="inputfile">
-              </label>
-              <button class="btn btn-secondary " onclick="rotateImage(-90)">↩️ 左旋</button>
-              <button class="btn btn-success " id="uploadBtn">✂️ 裁剪头像</button>
-
-              <button class="btn btn-danger " style="margin-top: 150px;" onclick="avatar_toolt.hide()">❌ 取消</button>
-
-
-
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
-/* 头像裁剪器样式*/
+.cropper-container {
-
+  border: 1px solid var(--vp-c-divider);
-  .container {
+  border-radius: 0.375rem;
-    width: 95%;
+  margin-bottom: 1rem;
-    /* 改为百分比宽度 */
+  margin-top: 1rem;
-    margin: 20px auto;
+  padding: 1.25rem 1.5rem;
-    /* 增加上下边距 */
-    max-width: 1200px;
-    /* 保留最大宽度 */
-    background: white;
-    padding: 30px;
-    border-radius: 12px;
 
+  :deep(cropper-canvas) {
+    height: 360px;
   }
-
+}
-  .flex-wrapper {
-    display: flex;
-    gap: 30px;
-    margin-top: 20px;
-    flex-wrap: wrap;
-    /* 添加换行支持 */
-  }
-
-  /* 裁剪区域 */
-  .crop-section {
-    flex: 1 1 60%;
-    /* 弹性布局基础宽度 */
-    min-width: 300px;
-    /* 降低最小宽度 */
-    height: auto;
-    /* 移除固定高度 */
-    min-height: 400px;
-    /* 设置最小高度 */
-  }
-
-  #image-wrapper {
-    width: 100%;
-    height: 60vh;
-    /* 改用视窗单位 */
-    max-height: 600px;
-    /* 设置最大高度 */
-    background: #f8f9fa;
-    border: 2px dashed #ddd;
-    border-radius: 8px;
-    overflow: hidden;
-  }
-
-  /* 预览区域自适应 */
-  .preview-section {
-    flex: 1 1 35%;
-    /* 弹性布局基础宽度 */
-    min-width: 250px;
-    /* 设置合理最小宽度 */
-  }
-
-  /* 移动端适配 */
-  @media (max-width: 768px) {
-    .container {
-      padding: 15px;
-      /* 减少内边距 */
-    }
-
-    .flex-wrapper {
-      flex-direction: column;
-      /* 垂直排列 */
-    }
-
-    .crop-section,
-    .preview-section {
-      width: 100% !important;
-      /* 强制全宽 */
-      min-width: unset;
-      /* 移除最小宽度 */
-    }
-
-    #image-wrapper {
-      height: 50vh;
-      /* 调整移动端高度 */
-    }
-
-    .preview-box {
-      width: 120px;
-      /* 缩小预览区域 */
-      height: 120px;
-    }
-
-    .controls {
-      flex-direction: column;
-      /* 垂直排列按钮 */
-      margin-top: 10px;
-    }
-  }
-
-
-  #cropper-image {
-    max-width: none !important;
-    max-height: none !important;
-  }
-
-  /* 控制区域 */
-  .controls {
-    margin-top: 20px;
-    display: flex;
-    flex-direction: column;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 10px;
-  }
-
-  /* 预览区域 */
-  .preview-section {
-    flex: 1;
-    min-width: 50px;
-  }
-
-  .preview-box {
-    width: 150px;
-    height: 150px;
-    /* border-radius: 50%; */
-    border: 3px solid var(--primary-color);
-    overflow: hidden;
-    margin: 0 auto 20px;
-  }
-
-  #preview-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-
-
-  /* 上传进度 */
-  .progress-container {
-    height: 8px;
-    background: #eee;
-    border-radius: 4px;
-    margin-top: 20px;
-    overflow: hidden;
-    display: none;
-  }
-
-  .progress-bar {
-    width: 0%;
-    height: 100%;
-    background: var(--primary-color);
-    transition: width 0.3s ease;
-  }
-
-  /* 消息提示 */
-  .alertavater {
-    padding: 15px;
-    border-radius: 6px;
-    margin-top: 20px;
-    display: none;
-  }
-
-  .alertavater-success {
-    background: #dff0d8;
-    color: #3c763d;
-  }
-
-  .alertavater-error {
-    background: #f2dede;
-    color: var(--error-color);
-  }
-  input[type="file"] {
-    display: none;
-  }
-
-
 </style>

frontent/ops_vue_js/src/components/imageCropperComponent.vue

@@ -0,0 +1,297 @@
+<script setup>
+
+import { Modal } from "@tabler/core";
+import { onMounted, ref } from "vue";
+
+import  "@/libs/cropper.min.js"
+
+
+const avata_toolt=ref()
+
+const avatar_toolt_moda=ref()
+
+const cropper=ref()
+
+ const image = document.getElementById('cropper-image');
+  // 初始化Cropper
+  function initCropper(imageSrc) {
+    if (cropper.value) {
+      cropper.value.destroy();
+    }
+
+    image.src = imageSrc;
+    cropper.value = new Cropper(image, {
+      aspectRatio: 1,
+      viewMode: 2,
+      autoCropArea: 0.8,
+      zoomable: true,
+      zoomOnWheel: true,
+      zoomOnTouch: true,
+      wheelZoomRatio: 0.1,
+      //minCanvasWidth: 400,
+      //minCanvasHeight: 400,
+      crop: updatePreview,
+      ready() {
+       
+       
+      }
+    });
+  }
+
+  function inputfile(e){
+    const file = e.target.files[0];
+    if (!file) return;
+
+    if (!file.type.startsWith('image/')) {
+      showMessage('⚠️ 请选择有效的图片文件', 'error');
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      initCropper(reader.result);
+      currentScale = 1;
+    };
+    reader.readAsDataURL(file);
+  }
+
+onMounted(()=>{
+  //console.log(avata_toolt)
+  avatar_toolt_moda.value=new Modal(avata_toolt.value)
+  avatar_toolt_moda.value.show()
+})
+
+
+</script>
+
+<template>
+
+  <div class="modal modal-blur fade" ref="avata_toolt" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="container">
+        <h1>头像裁剪工具</h1>
+
+        <div class="flex-wrapper">
+          <!-- 左侧裁剪区 -->
+          <div class="crop-section">
+            <div id="image-wrapper">
+              <img id="cropper-image"
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
+            </div>
+            <!-- 上传进度 -->
+            <div class="progress-container">
+              <div class="progress-bar"></div>
+            </div>
+
+            <!-- 消息提示 -->
+            <div id="message" class="alertavater"></div>
+
+            <div class="preview-stats">
+              <!-- <p>当前缩放: <span id="zoomValue">100%</span></p> -->
+              <p>图片尺寸: <span id="imageSize">0 x 0</span></p>
+            </div>
+          </div>
+
+          <!-- 右侧预览区 -->
+          <div class="preview-section">
+            <h3>实时预览</h3>
+            <div class="preview-box">
+              <img id="preview-img"
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
+            </div>
+
+            <!-- 控制按钮 -->
+            <div class="controls">
+              <label class="btn btn-primary">
+                📁 选择图片
+                <input type="file" accept="image/*" @change="inputfile">
+              </label>
+              <button class="btn btn-secondary " onclick="rotateImage(-90)">↩️ 左旋</button>
+              <button class="btn btn-success " id="uploadBtn">✂️ 裁剪头像</button>
+
+              <button class="btn btn-danger " style="margin-top: 150px;" onclick="avatar_toolt.hide()">❌ 取消</button>
+
+
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<style scoped>
+/* 头像裁剪器样式*/
+
+  .container {
+    width: 95%;
+    /* 改为百分比宽度 */
+    margin: 20px auto;
+    /* 增加上下边距 */
+    max-width: 1200px;
+    /* 保留最大宽度 */
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+
+  }
+
+  .flex-wrapper {
+    display: flex;
+    gap: 30px;
+    margin-top: 20px;
+    flex-wrap: wrap;
+    /* 添加换行支持 */
+  }
+
+  /* 裁剪区域 */
+  .crop-section {
+    flex: 1 1 60%;
+    /* 弹性布局基础宽度 */
+    min-width: 300px;
+    /* 降低最小宽度 */
+    height: auto;
+    /* 移除固定高度 */
+    min-height: 400px;
+    /* 设置最小高度 */
+  }
+
+  #image-wrapper {
+    width: 100%;
+    height: 60vh;
+    /* 改用视窗单位 */
+    max-height: 600px;
+    /* 设置最大高度 */
+    background: #f8f9fa;
+    border: 2px dashed #ddd;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  /* 预览区域自适应 */
+  .preview-section {
+    flex: 1 1 35%;
+    /* 弹性布局基础宽度 */
+    min-width: 250px;
+    /* 设置合理最小宽度 */
+  }
+
+  /* 移动端适配 */
+  @media (max-width: 768px) {
+    .container {
+      padding: 15px;
+      /* 减少内边距 */
+    }
+
+    .flex-wrapper {
+      flex-direction: column;
+      /* 垂直排列 */
+    }
+
+    .crop-section,
+    .preview-section {
+      width: 100% !important;
+      /* 强制全宽 */
+      min-width: unset;
+      /* 移除最小宽度 */
+    }
+
+    #image-wrapper {
+      height: 50vh;
+      /* 调整移动端高度 */
+    }
+
+    .preview-box {
+      width: 120px;
+      /* 缩小预览区域 */
+      height: 120px;
+    }
+
+    .controls {
+      flex-direction: column;
+      /* 垂直排列按钮 */
+      margin-top: 10px;
+    }
+  }
+
+
+  #cropper-image {
+    max-width: none !important;
+    max-height: none !important;
+  }
+
+  /* 控制区域 */
+  .controls {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+  }
+
+  /* 预览区域 */
+  .preview-section {
+    flex: 1;
+    min-width: 50px;
+  }
+
+  .preview-box {
+    width: 150px;
+    height: 150px;
+    /* border-radius: 50%; */
+    border: 3px solid var(--primary-color);
+    overflow: hidden;
+    margin: 0 auto 20px;
+  }
+
+  #preview-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+
+
+  /* 上传进度 */
+  .progress-container {
+    height: 8px;
+    background: #eee;
+    border-radius: 4px;
+    margin-top: 20px;
+    overflow: hidden;
+    display: none;
+  }
+
+  .progress-bar {
+    width: 0%;
+    height: 100%;
+    background: var(--primary-color);
+    transition: width 0.3s ease;
+  }
+
+  /* 消息提示 */
+  .alertavater {
+    padding: 15px;
+    border-radius: 6px;
+    margin-top: 20px;
+    display: none;
+  }
+
+  .alertavater-success {
+    background: #dff0d8;
+    color: #3c763d;
+  }
+
+  .alertavater-error {
+    background: #f2dede;
+    color: var(--error-color);
+  }
+  input[type="file"] {
+    display: none;
+  }
+
+
+</style>

frontent/ops_vue_js/src/views/test.vue

@@ -5,6 +5,8 @@ import imageCropper from '@/components/imageCropper.vue';
 
 import croppertest from '@/components/croppertest.vue';
 
+import imageCropperComponent from '@/components/imageCropperComponent.vue';
+
 const user = useUserStore()