HEIC und HEIF zu JPEG Konvertierung

Damit wird nun auch das bescheuerte Bildformat von Apple unterstützt

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=="],

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",

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"),
+    "objekt": await import("../src/pages/api/objekt/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"),
     "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"),

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 () => {