diff --git a/bun.lock b/bun.lock index bf5a8067..45af1866 100644 --- a/bun.lock +++ b/bun.lock @@ -28,6 +28,7 @@ "flag-icons": "^6.15.0", "fontkit": "^2.0.4", "handlebars": "^4.7.8", + "heic2any": "^0.0.4", "highlight.run": "^9.14.0", "is-base64": "^1.1.0", "js-cookie": "^3.0.5", @@ -1555,6 +1556,8 @@ "hastscript": ["hastscript@9.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "comma-separated-tokens": "^2.0.0", "hast-util-parse-selector": "^4.0.0", "property-information": "^6.0.0", "space-separated-tokens": "^2.0.0" } }, "sha512-jzaLBGavEDKHrc5EfFImKN7nZKKBdSLIdGvCwDZ9TfzbF2ffXiov8CKE445L2Z1Ek2t/m4SKQ2j6Ipv7NyUolw=="], + "heic2any": ["heic2any@0.0.4", "", {}, "sha512-3lLnZiDELfabVH87htnRolZ2iehX9zwpRyGNz22GKXIu0fznlblf0/ftppXKNqS26dqFSeqfIBhAmAj/uSp0cA=="], + "hexoid": ["hexoid@2.0.0", "", {}, "sha512-qlspKUK7IlSQv2o+5I7yhUd7TxlOG2Vr5LTa3ve2XSNVKAL/n/u/7KLvKmFNimomDIKvZFXWHv0T12mv7rT8Aw=="], "highlight.run": ["highlight.run@9.14.0", "", {}, "sha512-ZR+ZLHlVU8lXqsuto0ZEMAOuvptaTBBf1jradnKDIn9OfAXupcYFbkASDlbsZtyBh2SYJSK50xwrucXujhksRg=="], diff --git a/package.json b/package.json index 5fd7c213..ee03e4d8 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "flag-icons": "^6.15.0", "fontkit": "^2.0.4", "handlebars": "^4.7.8", + "heic2any": "^0.0.4", "highlight.run": "^9.14.0", "is-base64": "^1.1.0", "js-cookie": "^3.0.5", diff --git a/src/astro-typesafe-api-caller.ts b/src/astro-typesafe-api-caller.ts index 18f06c89..57e57d18 100644 --- a/src/astro-typesafe-api-caller.ts +++ b/src/astro-typesafe-api-caller.ts @@ -5,7 +5,6 @@ export const createCaller = createCallerFactory({ "klimafaktoren": await import("../src/pages/api/klimafaktoren.ts"), "postleitzahlen": await import("../src/pages/api/postleitzahlen.ts"), "unterlage": await import("../src/pages/api/unterlage.ts"), - "aufnahme": await import("../src/pages/api/aufnahme/index.ts"), "admin/ausstellen": await import("../src/pages/api/admin/ausstellen.ts"), "admin/bedarfsausweis-ausstellen": await import("../src/pages/api/admin/bedarfsausweis-ausstellen.ts"), "admin/bestellbestaetigung": await import("../src/pages/api/admin/bestellbestaetigung.ts"), @@ -13,6 +12,7 @@ export const createCaller = createCallerFactory({ "admin/nicht-ausstellen": await import("../src/pages/api/admin/nicht-ausstellen.ts"), "admin/registriernummer": await import("../src/pages/api/admin/registriernummer.ts"), "admin/stornieren": await import("../src/pages/api/admin/stornieren.ts"), + "aufnahme": await import("../src/pages/api/aufnahme/index.ts"), "auth/access-token": await import("../src/pages/api/auth/access-token.ts"), "auth/passwort-vergessen": await import("../src/pages/api/auth/passwort-vergessen.ts"), "auth/refresh-token": await import("../src/pages/api/auth/refresh-token.ts"), @@ -22,21 +22,21 @@ export const createCaller = createCallerFactory({ "bedarfsausweis-gewerbe/[id]": await import("../src/pages/api/bedarfsausweis-gewerbe/[id].ts"), "bedarfsausweis-gewerbe": await import("../src/pages/api/bedarfsausweis-gewerbe/index.ts"), "bilder/[id]": await import("../src/pages/api/bilder/[id].ts"), - "geg-nachweis-gewerbe/[id]": await import("../src/pages/api/geg-nachweis-gewerbe/[id].ts"), - "geg-nachweis-gewerbe": await import("../src/pages/api/geg-nachweis-gewerbe/index.ts"), "geg-nachweis-wohnen/[id]": await import("../src/pages/api/geg-nachweis-wohnen/[id].ts"), "geg-nachweis-wohnen": await import("../src/pages/api/geg-nachweis-wohnen/index.ts"), - "objekt": await import("../src/pages/api/objekt/index.ts"), + "geg-nachweis-gewerbe/[id]": await import("../src/pages/api/geg-nachweis-gewerbe/[id].ts"), + "geg-nachweis-gewerbe": await import("../src/pages/api/geg-nachweis-gewerbe/index.ts"), "rechnung/[id]": await import("../src/pages/api/rechnung/[id].ts"), "rechnung/anfordern": await import("../src/pages/api/rechnung/anfordern.ts"), "rechnung": await import("../src/pages/api/rechnung/index.ts"), - "ticket": await import("../src/pages/api/ticket/index.ts"), - "verbrauchsausweis-wohnen/[id]": await import("../src/pages/api/verbrauchsausweis-wohnen/[id].ts"), - "verbrauchsausweis-wohnen": await import("../src/pages/api/verbrauchsausweis-wohnen/index.ts"), + "objekt": await import("../src/pages/api/objekt/index.ts"), "user": await import("../src/pages/api/user/index.ts"), "user/self": await import("../src/pages/api/user/self.ts"), "verbrauchsausweis-gewerbe/[id]": await import("../src/pages/api/verbrauchsausweis-gewerbe/[id].ts"), "verbrauchsausweis-gewerbe": await import("../src/pages/api/verbrauchsausweis-gewerbe/index.ts"), + "ticket": await import("../src/pages/api/ticket/index.ts"), + "verbrauchsausweis-wohnen/[id]": await import("../src/pages/api/verbrauchsausweis-wohnen/[id].ts"), + "verbrauchsausweis-wohnen": await import("../src/pages/api/verbrauchsausweis-wohnen/index.ts"), "webhooks/mollie": await import("../src/pages/api/webhooks/mollie.ts"), "aufnahme/[id]/bilder": await import("../src/pages/api/aufnahme/[id]/bilder.ts"), "aufnahme/[id]": await import("../src/pages/api/aufnahme/[id]/index.ts"), diff --git a/src/components/UploadImages.svelte b/src/components/UploadImages.svelte index 77478bce..7cd86c80 100644 --- a/src/components/UploadImages.svelte +++ b/src/components/UploadImages.svelte @@ -3,6 +3,7 @@ import type { Enums } from "#lib/client/prisma.js"; import Cookies from "js-cookie"; import { tryCatch } from "#lib/tryCatch.js"; + import heic2any from "heic2any"; export let max: number = 2; export let min: number = 1; @@ -38,8 +39,10 @@ for (let i = 0; i < files.length; i++) { const file = files[i]; + console.log(file); + - if (file.type !== "image/jpeg" && file.type !== "image/png") { + if (file.type !== "image/jpeg" && file.type !== "image/png" && file.type !== "image/webp" && file.type !== "image/heif" && file.type !== "image/heic") { continue; } @@ -49,7 +52,7 @@ const reader = new FileReader(); - reader.onload = () => { + reader.onload = async () => { if (reader.readyState != reader.DONE) { return; } @@ -59,6 +62,18 @@ } let blob = new Blob([reader.result as ArrayBuffer]); + + if (file.type === "image/heif" || file.type === "image/heic") { + // Heic files are not supported by canvas, so we convert them to jpeg first + // using an external library. + // This is a workaround until all browsers support heic natively. + // For more information see: https://caniuse.com/?search=heic + // and https://developer.apple.com/documentation/imageio/reading_heif_and_heic_images_on_ios + // and https://stackoverflow.com/questions/65887402/how-to-convert-heic-to-jpeg-in-javascript + // and https://github.com/mbitsnbites/heic2any + blob = await heic2any({ blob, toType: "image/jpeg", quality: 0.8 }); + } + let url = URL.createObjectURL(blob); let image = new Image(); image.onload = async () => {