Implement libheif v1.19.3 instead of heic2any to prevent browser crashes with some iOS 18 heic image files

public/scripts/heif-convert.js

@@ -0,0 +1,36 @@
+function HeifConvert(libheif) {
+    this.libheif = libheif;
+    this.decoder = new libheif.HeifDecoder();
+}
+
+
+HeifConvert.prototype.convert = async function (buffer) {
+    const decodeResult = this.decoder.decode(buffer);
+    const image = decodeResult[0];
+
+    let w = image.get_width();
+    let h = image.get_height();
+    const canvas = document.createElement("canvas");
+    canvas.width = w;
+    canvas.height = h;
+
+    const ctx = canvas.getContext("2d");
+    const imageData = ctx.createImageData(w, h);
+
+    await copyData(imageData, image);
+
+    ctx.putImageData(imageData, 0, 0);
+    image.free();
+    return canvas;
+};
+
+function copyData(dataContainer, image) {
+    return new Promise((resolve, reject) => {
+        image.display(
+            dataContainer,
+            function () {
+                resolve()
+            }
+        );
+    })
+}

public/scripts/main.js

@@ -17,7 +17,8 @@ class PairDrop {
             "scripts/qr-code.min.js",
             "scripts/zip.min.js",
             "scripts/no-sleep.min.js",
-            "scripts/heic2any.min.js"
+            "scripts/heif-convert.js",
+            "scripts/libheif.js"
         ];
 
         this.registerServiceWorker();

public/scripts/util.js

@@ -478,12 +478,7 @@ function getThumbnailAsDataUrl(file, width = undefined, height = undefined, qual
         try {
             if (file.type === "image/heif" || file.type === "image/heic") {
                 // browsers can't show heic files --> convert to jpeg before creating thumbnail
-                let blob = await fileToBlob(file);
-                file = await heic2any({
-                    blob,
-                    toType: "image/jpeg",
-                    quality: quality
-                });
+                file = await heicToJpeg(file, 0.5);
             }
 
             let imageUrl = URL.createObjectURL(file);
@@ -541,6 +536,32 @@ function getThumbnailAsDataUrl(file, width = undefined, height = undefined, qual
     })
 }
 
+function initHeicConverter() {
+    return new Promise((resolve, reject) => {
+        fetch("libheif.wasm")
+            .then((res) => res.arrayBuffer())
+            .then(async (wasmBinary) => {
+                resolve(new HeifConvert(libheif({ wasmBinary: wasmBinary })));
+            })
+            .catch(reject);
+    });
+}
+
+async function heicToJpeg(file, quality) {
+    const heicConverter = await initHeicConverter();
+    console.log("Using libheif", heicConverter.libheif.heif_get_version());
+
+    const buffer = await file.arrayBuffer();
+    const canvas = await heicConverter.convert(buffer);
+
+    return new Promise(resolve => {
+        canvas.toBlob(blob => resolve(blob),
+            'image/jpeg',
+            quality
+        );
+    });
+}
+
 // Resolves returned promise when image is loaded and throws error if image cannot be shown
 function waitUntilImageIsLoaded(imageUrl, timeout = 10000) {
     return new Promise((resolve, reject) => {