import heic2any from "heic2any"; export function compressImage(file: File, maxSize: number): Promise { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = (readerEvent: any) => { const image = new Image(); image.onload = () => { let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); let width = image.width; let height = image.height; let quality = 0.9; let dataUrl; do { canvas.width = width; canvas.height = height; ctx?.clearRect(0, 0, canvas.width, canvas.height); ctx?.drawImage(image, 0, 0, width, height); dataUrl = canvas.toDataURL("image/jpeg", quality); if (dataUrl.length < maxSize) break; if (quality > 0.5) { // Prioritize quality reduction quality -= 0.1; } else { // Then reduce the size width *= 0.9; height *= 0.9; } } while (dataUrl.length > maxSize); resolve(dataUrl); }; image.onerror = reject; image.src = readerEvent.target.result; }; reader.onerror = reject; if (file.type.includes("heic")) { heic2any({ blob: file, toType: "image/jpeg" }) .then((blob) => { reader.readAsDataURL(blob as Blob); }) .catch((e) => { reject(e); }); } reader.readAsDataURL(file); }); }