diff --git a/web_src/js/features/comp/Cropper.ts b/web_src/js/features/comp/Cropper.ts index 32e02221cbd..00d92f9b1a7 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); } }); }