code optimization

This commit is contained in:
Kerwin Bryant 2024-11-21 01:16:45 +00:00
parent 692fcff98a
commit cd598bfd3d

View File

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