code optimization

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 {
+  .cropper-editor {
     flex: 1;
-}
+    max-width: 100%;
+    overflow: hidden;
+    .cropper-wrapper {
+      height: 600px;
+      max-height: 600px;
+    }
+    >div {
+      display: flex;
+      column-gap: 10px;
+    }
+  }
 
-#result {
+  #cropper-result {
     overflow: hidden;
     width: 256px;
     height: 256px;
     max-width: 256px;
     max-height: 256px;
+  }
 }

web_src/js/features/comp/Cropper.ts

@@ -1,19 +1,25 @@
 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, {
+    if (cropper) {
+      cropper.replace(url);
+    } else {
+      cropper = new Cropper(source, {
         aspectRatio: 1,
         viewMode: 1,
         crop() {
@@ -27,7 +33,8 @@ export function initCompCropper() {
           });
         },
       });
-    document.querySelector('#cropper').classList.remove('hidden');
+    }
+    showElem(cropperContainer);
   };
 
   input.addEventListener('change', (e) => {