{ const files = profileImageInputElement.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 100x100 let newWidth, newHeight; if (aspectRatio > 1) { newWidth = 100 * aspectRatio; newHeight = 100; } else { newWidth = 100; newHeight = 100 / aspectRatio; } // Set the canvas size canvas.width = 100; canvas.height = 100; // Calculate the position to center the image const offsetX = (100 - newWidth) / 2; const offsetY = (100 - 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/jpeg'); // Display the compressed image profileImageUrl = compressedSrc; profileImageInputElement.files = null; }; }; if ( files.length > 0 && ['image/gif', 'image/jpeg', 'image/png'].includes(files[0]['type']) ) { reader.readAsDataURL(files[0]); } }} />
Profile
{ profileImageInputElement.click(); }} >
{ const url = await getGravatarUrl($user.email); profileImageUrl = url; }}>Use Gravatar
Name
JWT Token
{ showJWTToken = !showJWTToken; }} > {#if showJWTToken}
{:else}
{/if}
{ copyToClipboard(localStorage.token); JWTTokenCopied = true; setTimeout(() => { JWTTokenCopied = false; }, 2000); }} > {#if JWTTokenCopied}
{:else}
{/if}
{ const res = await submitHandler(); if (res) { saveHandler(); } }} > Save