code optimization

Author: kerwin612

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);
     }
   });
 }