read image, create data url

Webserver/src/routes/image/+page.svelte

@@ -10,7 +10,31 @@
 	let imageURL: string | null, lastImage: File;
 	let uploadData: UploadData;
 
-	async function sendImage() {}
+	async function fileAsDataURL(file: File, width: number, height: number): Promise<string> {
+		return new Promise((resolve, reject) => {
+			const img = new Image();
+			img.onload = () => {
+				const canvas = document.createElement('canvas');
+				const context = canvas.getContext('2d');
+
+				// Set the canvas dimensions
+				canvas.width = width;
+				canvas.height = height;
+
+				// Draw the image onto the canvas, resizing it to fit the canvas
+				context?.drawImage(img, 0, 0, width, height);
+
+				// Convert the canvas image to a Data URL
+				const dataURL = canvas.toDataURL();
+				resolve(dataURL);
+			};
+			img.onerror = reject;
+
+			// Create an object URL for the file and set it as the image source
+			const objectURL = URL.createObjectURL(file);
+			img.src = objectURL;
+		});
+	}
 
 	function uploadImage(event: Event) {
 		// Revoke previous image url, if any
@@ -46,12 +70,11 @@
 <input type="file" name="image" accept="image/*" on:change={uploadImage} />
 {#if imageURL}
 	<img src={imageURL} alt="User uploaded" />
-	{#await sendImage()}
-		<p>Sending image . . .</p>
+	{#await fileAsDataURL(lastImage, 192, 192)}
+		<p>Loading image data . . .</p>
 		<p>{uploadData.elapsed} seconds elapsed.</p>
 	{:then}
 		<p>Done!</p>
 		<p>{uploadData.elapsed} seconds elapsed.</p>
-		{clearInterval(uploadData.interval)}
 	{/await}
 {/if}