From cd598bfd3d997f89700a01d84434a4d09ca8d5e9 Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Thu, 21 Nov 2024 01:16:45 +0000
Subject: [PATCH] code optimization

---
 web_src/js/features/comp/Cropper.ts | 31 +++++++++--------------------
 1 file changed, 9 insertions(+), 22 deletions(-)

diff --git a/web_src/js/features/comp/Cropper.ts b/web_src/js/features/comp/Cropper.ts
index 32e02221cb..00d92f9b1a 100644
--- a/web_src/js/features/comp/Cropper.ts
+++ b/web_src/js/features/comp/Cropper.ts
@@ -1,31 +1,30 @@
-import Cropper from 'cropperjs';
 import {showElem} from '../../utils/dom.ts';
 
-export function initCompCropper() {
+export async function initCompCropper() {
   const cropperContainer = document.querySelector('#cropper-panel');
   if (!cropperContainer) {
     return;
   }
 
-  let filename;
-  let cropper;
+  const {default: Cropper} = await import(/* webpackChunkName: "cropperjs" */'cropperjs');
+
   const source = document.querySelector('#cropper-source');
   const result = document.querySelector('#cropper-result');
   const input = document.querySelector('#new-avatar');
 
-  const done = function (url: string): void {
+  const done = function (url: string, filename: string): void {
     source.src = url;
     result.src = url;
 
-    if (cropper) {
-      cropper.replace(url);
+    if (input._cropper) {
+      input._cropper.replace(url);
     } else {
-      cropper = new Cropper(source, {
+      input._cropper = new Cropper(source, {
         aspectRatio: 1,
         viewMode: 1,
         autoCrop: false,
         crop() {
-          const canvas = cropper.getCroppedCanvas();
+          const canvas = input._cropper.getCroppedCanvas();
           result.src = canvas.toDataURL();
           canvas.toBlob((blob) => {
             const file = new File([blob], filename, {type: 'image/png', lastModified: Date.now()});
@@ -42,20 +41,8 @@ export function initCompCropper() {
   input.addEventListener('change', (e: Event & {target: HTMLInputElement}) => {
     const files = e.target.files;
 
-    let reader;
-    let file;
     if (files?.length > 0) {
-      file = files[0];
-      filename = file.name;
-      if (URL) {
-        done(URL.createObjectURL(file));
-      } else if (FileReader) {
-        reader = new FileReader();
-        reader.addEventListener('load', () => {
-          done(reader.result);
-        });
-        reader.readAsDataURL(file);
-      }
+      done(URL.createObjectURL(files[0]), files[0].name);
     }
   });
 }