code optimization

Author: kerwin612

options/locale/locale_en-US.ini

@@ -763,6 +763,7 @@ uploaded_avatar_not_a_image = The uploaded file is not an image.
 uploaded_avatar_is_too_big = The uploaded file size (%d KiB) exceeds the maximum size (%d KiB).
 update_avatar_success = Your avatar has been updated.
 update_user_avatar_success = The user's avatar has been updated.
+cropper_prompt = Note: The saved image format after cropping is unified as JPEG.
 
 change_password = Update Password
 old_password = Current Password

templates/user/settings/profile.tmpl

@@ -127,17 +127,20 @@
 					<input id="new-avatar" name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp">
 				</div>
 
-				<div class="inline field cropper hidden" id="cropper">
-					<div class="preview">
+				<div class="inline field cropper-panel tw-hidden" id="cropper-panel">
+					<div class="cropper-preview">
 						<h3>{{ctx.Locale.Tr "preview"}}</h3>
 						<div>
-							<img id="result">
+							<img id="cropper-result">
 						</div>
 					</div>
-					<div class="editor">
-						<h3>{{ctx.Locale.Tr "edit"}}</h3>
+					<div class="cropper-editor">
 						<div>
-							<img id="image">
+							<h3>{{ctx.Locale.Tr "edit"}}</h3>
+							<span>{{ctx.Locale.Tr "settings.cropper_prompt"}}</span>
+						</div>
+						<div class="cropper-wrapper">
+							<img class="tw-hidden" id="cropper-source">
 						</div>
 					</div>
 				</div>

web_src/css/features/cropper.css

@@ -1,22 +1,28 @@
 @import "cropperjs/dist/cropper.css";
 
-.cropper {
+.cropper-panel {
   display: flex;
   column-gap: 10px;
-}
-
-.hidden {
-  display: none;
-}
 
-.editor {
-  flex: 1;
-}
+  .cropper-editor {
+    flex: 1;
+    max-width: 100%;
+    overflow: hidden;
+    .cropper-wrapper {
+      height: 600px;
+      max-height: 600px;
+    }
+    >div {
+      display: flex;
+      column-gap: 10px;
+    }
+  }
 
-#result {
-  overflow: hidden;
-  width: 256px;
-  height: 256px;
-  max-width: 256px;
-  max-height: 256px;
+  #cropper-result {
+    overflow: hidden;
+    width: 256px;
+    height: 256px;
+    max-width: 256px;
+    max-height: 256px;
+  }
 }

web_src/js/features/comp/Cropper.ts

@@ -1,33 +1,40 @@
 import Cropper from 'cropperjs';
+import {showElem} from '../../utils/dom.ts';
 
 export function initCompCropper() {
-  if (!document.querySelector('#cropper')) {
+  const cropperContainer = document.querySelector('#cropper-panel');
+  if (!cropperContainer) {
     return;
   }
 
   let filename;
-  const image = document.querySelector('#image');
-  const result = document.querySelector('#result');
+  let cropper;
+  const source = document.querySelector('#cropper-source');
+  const result = document.querySelector('#cropper-result');
   const input = document.querySelector('#new-avatar');
 
   const done = function (url) {
-    image.src = url;
+    source.src = url;
 
-    const cropper = new Cropper(image, {
-      aspectRatio: 1,
-      viewMode: 1,
-      crop() {
-        const canvas = cropper.getCroppedCanvas();
-        result.src = canvas.toDataURL();
-        canvas.toBlob((blob) => {
-          const file = new File([blob], filename, {type: 'image/jpeg', lastModified: Date.now()});
-          const container = new DataTransfer();
-          container.items.add(file);
-          input.files = container.files;
-        });
-      },
-    });
-    document.querySelector('#cropper').classList.remove('hidden');
+    if (cropper) {
+      cropper.replace(url);
+    } else {
+      cropper = new Cropper(source, {
+        aspectRatio: 1,
+        viewMode: 1,
+        crop() {
+          const canvas = cropper.getCroppedCanvas();
+          result.src = canvas.toDataURL();
+          canvas.toBlob((blob) => {
+            const file = new File([blob], filename, {type: 'image/jpeg', lastModified: Date.now()});
+            const container = new DataTransfer();
+            container.items.add(file);
+            input.files = container.files;
+          });
+        },
+      });
+    }
+    showElem(cropperContainer);
   };
 
   input.addEventListener('change', (e) => {