图片裁剪工具ok

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

frontent/ops_vue_js/src/components/imageCropper.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { Modal } from "@tabler/core";
 import { onMounted, ref } from "vue";
-
 import "cropperjs";
 
+import { useI18n } from "vue-i18n";
+const { t, locale } = useI18n();
+
 const cro_sele = ref();
 const cro_canv = ref();
 const cro_imag = ref();
@@ -18,49 +20,74 @@ reader.onload = () => {
   initCropper(reader.result);
 };
 
+const emit = defineEmits(['crop'])
+
 onMounted(() => {
   cro_sele.value.$change(0, 0, cor_size_width, cor_size_height);
   cro_canv.value.style.width = cor_size_width.toString() + "px";
   cro_canv.value.style.height = cor_size_height.toString() + "px";
 
-  cro_imag.value.src = "https://wnfed.com/usr/uploads/2020/07/736937178.jpg";
+  cro_imag.value.src = "";
 
   //console.log(cro_canv.value.clientHeight)
 });
 
-function initCropper(imageSrc){
-
+function initCropper(imageSrc) {
   is_have_URL.value = true;
-  cro_imag.value.src=imageSrc;
+  cro_imag.value.src = imageSrc;
 }
 
-function inputfile(e){
-    const file = e.target.files[0];
-    if (!file){
-      e.target.value=""
-      is_have_URL.value = false;
-      return;
-    }
+function cancel() {
+  is_have_URL.value = false;
+}
 
-    if (!file.type.startsWith('image/')) {
-      e.target.value=""
-      is_have_URL.value = false;
-      return;
-    }
-
-    reader.readAsDataURL(file);
- 
+function inputfile(e) {
+  const file = e.target.files[0];
+  if (!file) {
+    e.target.value = "";
+    is_have_URL.value = false;
+    return;
   }
 
+  if (!file.type.startsWith("image/")) {
+    e.target.value = "";
+    is_have_URL.value = false;
+    return;
+  }
+
+  reader.readAsDataURL(file);
+}
+
+function openFilePicker() {
+  const fileInput = document.createElement("input");
+  fileInput.type = "file";
+  fileInput.accept = "image/*"; // 可选：限制文件类型
+  fileInput.multiple = false; // 可选：是否允许多选
+
+  fileInput.onchange = (e) => {
+    inputfile(e);
+  };
+
+  fileInput.click(); // 触发文件选择
+}
+
 function getsele() {
-  console.log(cro_canv.value.$toCanvas())
+  const canvas = cro_canv.value.$toCanvas().then((a) => {
+    //console.log(a);
+    const imageData = a.toDataURL("image/png");
+
+    emit('crop',imageData)
+    //console.log(imageData);
+  });
 }
 </script>
 
 <template>
-  <div>
-    <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
-      <input class="btn btn-outline-primary" type="file" accept="image/*" @change="inputfile">
+  <div class="d-flex flex-column flex-md-row">
+    <div v-show="!is_have_URL" class="col-6 col-sm-4 col-md-2 col-xl py-3">
+      <button class="btn btn-outline-primary" @click="openFilePicker">
+        {{ t("cropper.select_image") }}
+      </button>
     </div>
 
     <cropper-canvas
@@ -91,14 +118,36 @@ function getsele() {
         ></cropper-handle>
       </cropper-selection>
     </cropper-canvas>
-  </div>
 
-  <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
-    <button class="btn btn-outline-primary" @click="getsele">getsele</button>
+    <div v-show="is_have_URL" class="thisbutton">
+      <button class="btn btn-outline-primary" @click="getsele">
+        {{ t("cropper.crop_image") }}
+      </button>
+      <button class="btn btn-outline-danger" @click="cancel">{{ t("cropper.closs") }}</button>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.container {
+  display: flex;
+  /* 默认就是水平排列 */
+  /* flex-direction: row; */
+}
+
+.thisbutton {
+  display: flex;
+  flex-direction: column;
+  margin-left: 20px;
+  margin-top: 20px;
+  gap: 20px; /* 所有子元素之间的间距 */
+}
+
+.box {
+  margin: 10px;
+  flex-direction: column; /* 关键：改为纵向排列 */
+}
+
 .cropper-container {
   /* 四个角相同圆角 */
   border-radius: 10px;

frontent/ops_vue_js/src/i18n/en.json

@@ -4,50 +4,57 @@
     "login": "Login",
     "forgot_password": "Forgot Password",
     "register": "Register",
-    "schedule":"Schedule",
-    "purchase":"Purchase",
-    "warehouse":"Warehouse"
+    "schedule": "Schedule",
+    "purchase": "Purchase",
+    "warehouse": "Warehouse"
   },
-  "purchase":{
-    "purchase_list":"Purchase List",
-    "item_name":"Item Name",
-    "purpose":"Purpose",
-    "unit":"Unit",
-    "quantity":"Quantity",
-    "unit_price":"Unit Price",
-    "total_price":"Total Price",
-    "created_at":"Created At",
-    "updated_at":"Updated At",
-    "status":"Status",
-    "completed":"Completed",
-    "pending":"Pending",
-    "show":"Show",
-    "entries":"entries",
-    "search":"Search",
-    "add_part":"Add Order",
-    "exp_report":"Export Report"
+  "cropper": {
+    "select_image": "Select Image",
+    "select_File": "Select File",
+    "crop_image": "Crop Image",
+    "cancel": "Cancel",
+    "closs": "Closs"
+  },
+  "purchase": {
+    "purchase_list": "Purchase List",
+    "item_name": "Item Name",
+    "purpose": "Purpose",
+    "unit": "Unit",
+    "quantity": "Quantity",
+    "unit_price": "Unit Price",
+    "total_price": "Total Price",
+    "created_at": "Created At",
+    "updated_at": "Updated At",
+    "status": "Status",
+    "completed": "Completed",
+    "pending": "Pending",
+    "show": "Show",
+    "entries": "entries",
+    "search": "Search",
+    "add_part": "Add Order",
+    "exp_report": "Export Report"
   },
   "schedule": {
-    "my_schedule":"My Schedule",
-    "add_event":"Add Event",
-    "event_title":"Event Title",
-    "event_date":"Event Date",
-    "event_time":"Event Time",
-    "event_description":"Event Description",
-    "save_event":"Save Event",
-    "no_events":"No events found",
-    "delete_event":"Delete Event",
-    "edit_event":"Edit Event",
-    "tody":"Today",
-    "week":"This Week",
-    "month":"This Month",
-    "previous_month":"Prev Month",
-    "next_month":"Next Month",
-    "previous_year":"Prev Year",
-    "next_year":"Next Year"
+    "my_schedule": "My Schedule",
+    "add_event": "Add Event",
+    "event_title": "Event Title",
+    "event_date": "Event Date",
+    "event_time": "Event Time",
+    "event_description": "Event Description",
+    "save_event": "Save Event",
+    "no_events": "No events found",
+    "delete_event": "Delete Event",
+    "edit_event": "Edit Event",
+    "tody": "Today",
+    "week": "This Week",
+    "month": "This Month",
+    "previous_month": "Prev Month",
+    "next_month": "Next Month",
+    "previous_year": "Prev Year",
+    "next_year": "Next Year"
   },
   "message": {
-    "functionality_not_yet_developed":"Functionality not yet developed",
+    "functionality_not_yet_developed": "Functionality not yet developed",
     "hello": "Hello",
     "welcome": "Welcome",
     "dark_mode": "Enable dark mode",
@@ -88,14 +95,14 @@
     "user_settings": "Settings",
     "preferences": "Preferences",
     "administrator": "Administrator",
-    "select_date":"Select a date",
-    "save_ok":"Saved successfully",
-    "change_ok":"Changed successfully",
-    "type_old_pass":"Enter old password",
-    "type_new_pass":"Enter new password",
-    "type_cof_pass":"Confirm new password",
-    "old_pass_incorrect":"Old password is incorrect",
-    "confirm_password_incorrect":"Confirm password is incorrect"
+    "select_date": "Select a date",
+    "save_ok": "Saved successfully",
+    "change_ok": "Changed successfully",
+    "type_old_pass": "Enter old password",
+    "type_new_pass": "Enter new password",
+    "type_cof_pass": "Confirm new password",
+    "old_pass_incorrect": "Old password is incorrect",
+    "confirm_password_incorrect": "Confirm password is incorrect"
   },
   "settings": {
     "account_settings": "Account Settings",

frontent/ops_vue_js/src/i18n/zh-CN.json

@@ -8,6 +8,13 @@
     "purchase":"采购",
     "warehouse":"仓库"
   },
+   "cropper": {
+    "select_image": "选择图片",
+    "select_File": "选择文件",
+    "crop_image": "裁剪图片",
+    "cancel": "取消",
+     "closs": "关闭"
+  }, 
   "purchase":{
     "purchase_list":"采购列表",
     "item_name":"物品名称",

frontent/ops_vue_js/src/views/settings/account.vue

@@ -29,6 +29,9 @@ const cnfPassInput = ref();
 
 const isShowPassword = ref(false);
 
+const is_avatar_change=ref(false);
+const avatar_temp_url=ref("");
+
 function togglePasswordVisibility() {
   isShowPassword.value = !isShowPassword.value;
 }
@@ -241,6 +244,12 @@ function changeAvatar() {
   );
 }
 
+function rev_avatar_url(url){
+  is_avatar_change.value=true
+  avatar_temp_url.value=url
+  //console.log(url)
+}
+
 function functionupdataTitle() {
   document.title = "Operations." + t("settings.account_settings");
 }
@@ -283,16 +292,17 @@ onMounted(() => {
                 <div class="row align-items-center">
                   <div class="col-auto">
                     <img
-                      :src="userStore.getUserAvatarPath()"
+                      :src="is_avatar_change?avatar_temp_url:userStore.getUserAvatarPath()"
                       alt=""
                       class="avatar avatar-xl"
                     />
                   </div>
                   <!-- <imageCropper /> -->
                   <div class="col-auto">
-                    <button class="btn" @click="changeAvatar">
+                    <imageCropper @crop="rev_avatar_url"></imageCropper>
+                    <!-- <button class="btn" @click="changeAvatar">
                       {{ t("settings.change_avatar") }}
-                    </button>
+                    </button> -->
                   </div>
                 </div>
                 <h3 class="card-title mt-4">-</h3>