86 lines
2.2 KiB
Svelte
86 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
|
|
|
|
export let max: number = 2;
|
|
export let name: string = ""
|
|
|
|
// Array of base64 encoded images read into the input.
|
|
import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
|
|
|
|
export let images: UploadedGebaeudeBild[] = [];
|
|
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
|
|
export let gebaeude: GebaeudeClient;
|
|
export let kategorie: Enums.BilderKategorie;
|
|
|
|
function getAllImages(this: HTMLInputElement) {
|
|
const files = this.files || [];
|
|
|
|
if (images.length == max) {
|
|
this.value = "";
|
|
return;
|
|
}
|
|
|
|
for (let i = 0; i < files.length; i++) {
|
|
const file = files[i];
|
|
|
|
if ((file.type !== "image/jpeg") && (file.type !== "image/png")) {
|
|
i--;
|
|
continue;
|
|
}
|
|
|
|
if (i == max) {
|
|
break;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = (ev) => {
|
|
if (reader.readyState != reader.DONE) {
|
|
return;
|
|
}
|
|
|
|
if (!reader.result) {
|
|
return;
|
|
}
|
|
|
|
let blob = new Blob([reader.result as ArrayBuffer]);
|
|
let url = URL.createObjectURL(blob);
|
|
let image = new Image();
|
|
image.onload = async () => {
|
|
// 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.8);
|
|
|
|
images.push({ base64: dataURL as string, kategorie });
|
|
images = images;
|
|
|
|
|
|
if (i == (Math.min(files.length, max) - 1)) {
|
|
this.value = "";
|
|
}
|
|
}
|
|
|
|
image.src = url;
|
|
}
|
|
|
|
reader.readAsArrayBuffer(file);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{#if max > 1}
|
|
<input type="file" {name} multiple on:change={getAllImages} />
|
|
{:else}
|
|
<input type="file" {name} on:change={getAllImages} />
|
|
{/if} |