Berechnung Bedarfsausweis

src/components/UploadImages.svelte

@@ -37,16 +37,38 @@
 				if (!reader.result) {
 					return;
 				}
-				
-				images.push({ ...file, data: reader.result as string } as (File & { data: string }));
-				images = images;
 
-				if (i == (Math.min(files.length, max) - 1)) {
-					this.value = "";
+				let blob = new Blob([reader.result as ArrayBuffer]);
+				let url = URL.createObjectURL(blob);
+				let image = new Image();
+				image.onload = () => {
+					// Create a new canvas with the desired output size
+					const canvas = document.createElement("canvas");
+					canvas.width = image.naturalWidth;
+					canvas.height = image.naturalHeight;
+
+					// Scale down the image and draw it onto the canvas
+					const ctx = canvas.getContext("2d");
+					if (!ctx) {
+						return;
+					}
+					ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight);
+
+					// Get the scaled-down data from the canvas in the desired output format and quality
+					const dataURL = canvas.toDataURL("image/jpeg", 0.75);
+
+					images.push({ ...file, data: dataURL as string } as (File & { data: string }));
+					images = images;
+
+					if (i == (Math.min(files.length, max) - 1)) {
+						this.value = "";
+					}
 				}
+				
+				image.src = url;
 			}
 
-			reader.readAsDataURL(file);
+			reader.readAsArrayBuffer(file);
 		}
 	}
 </script>
@@ -55,4 +77,4 @@
 	<input type="file" multiple on:change={getAllImages} />
 {:else}
 	<input type="file" on:change={getAllImages} />
-{/if}
+{/if}