{ const files = e.target.files ?? []; let reader = new FileReader(); reader.onload = (event) => { let originalImageUrl = `${event.target.result}`; const img = new Image(); img.src = originalImageUrl; img.onload = function () { const canvas = document.createElement( "canvas", ); const ctx = canvas.getContext("2d"); // Calculate the aspect ratio of the image const aspectRatio = img.width / img.height; // Calculate the new width and height to fit within 250x250 let newWidth, newHeight; if (aspectRatio > 1) { newWidth = 250 * aspectRatio; newHeight = 250; } else { newWidth = 250; newHeight = 250 / aspectRatio; } // Set the canvas size canvas.width = 250; canvas.height = 250; // Calculate the position to center the image const offsetX = (250 - newWidth) / 2; const offsetY = (250 - newHeight) / 2; // Draw the image on the canvas ctx.drawImage( img, offsetX, offsetY, newWidth, newHeight, ); // Get the base64 representation of the compressed image const compressedSrc = canvas.toDataURL( "image/webp", 0.8, ); // Display the compressed image profileImageUrl = compressedSrc; e.target.files = null; }; }; if ( files.length > 0 && [ "image/gif", "image/webp", "image/jpeg", "image/png", ].includes(files[0]["type"]) ) { reader.readAsDataURL(files[0]); } }} /> { imageInputElement.click(); }} >