브라우저에서 HEIF 이미지를 제대로 표현하지 못하던 버그 수정

package.json

@@ -36,6 +36,7 @@
     "eslint-plugin-tailwindcss": "^3.17.5",
     "file-saver": "^2.0.5",
     "globals": "^15.0.0",
+    "heic2any": "^0.0.4",
     "mime": "^4.0.6",
     "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.6",

pnpm-lock.yaml

@@ -88,6 +88,9 @@ devDependencies:
   globals:
     specifier: ^15.0.0
     version: 15.14.0
+  heic2any:
+    specifier: ^0.0.4
+    version: 0.0.4
   mime:
     specifier: ^4.0.6
     version: 4.0.6
@@ -2415,6 +2418,10 @@ packages:
       function-bind: 1.1.2
     dev: true
 
+  /heic2any@0.0.4:
+    resolution: {integrity: sha512-3lLnZiDELfabVH87htnRolZ2iehX9zwpRyGNz22GKXIu0fznlblf0/ftppXKNqS26dqFSeqfIBhAmAj/uSp0cA==}
+    dev: true
+
   /ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: false

src/routes/(fullscreen)/file/[id]/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import FileSaver from "file-saver";
+  import heic2any from "heic2any";
   import { untrack } from "svelte";
   import type { Writable } from "svelte/store";
   import { TopBar } from "$lib/components";
@@ -14,7 +15,8 @@
   let info: Writable<FileInfo | null> | undefined = $state();
   let isDownloaded = $state(false);
 
-  let content: ArrayBuffer | undefined = $state();
+  let content: Blob | undefined = $state();
+  let contentUrl: string | undefined = $state();
   let contentType: ContentType | undefined = $state();
 
   $effect(() => {
@@ -30,14 +32,21 @@
       untrack(() => {
         isDownloaded = true;
 
-        if ($info.contentType.startsWith("image/")) {
-          contentType = "image";
-        } else if ($info.contentType.startsWith("video/")) {
-          contentType = "video";
-        }
+        requestFileDownload(data.id, $info.contentIv, $info.dataKey).then(async (res) => {
+          content = new Blob([res], { type: $info.contentType });
+          if (content.type === "image/heic" || content.type === "image/heif") {
+            contentUrl = URL.createObjectURL(
+              (await heic2any({ blob: content, toType: "image/jpeg" })) as Blob,
+            );
+          } else {
+            contentUrl = URL.createObjectURL(content);
+          }
 
-        requestFileDownload(data.id, $info.contentIv, $info.dataKey).then((res) => {
-          content = res;
+          if (content.type.startsWith("image")) {
+            contentType = "image";
+          } else if (content.type.startsWith("video")) {
+            contentType = "video";
+          }
 
           if (!contentType) {
             FileSaver.saveAs(new Blob([res], { type: $info.contentType }), $info.name);
@@ -46,6 +55,14 @@
       });
     }
   });
+
+  $effect(() => {
+    return () => {
+      if (contentUrl) {
+        URL.revokeObjectURL(contentUrl);
+      }
+    };
+  });
 </script>
 
 <svelte:head>

src/routes/(fullscreen)/file/[id]/+page.ts

@@ -2,6 +2,8 @@ import { error } from "@sveltejs/kit";
 import { z } from "zod";
 import type { PageLoad } from "./$types";
 
+export const ssr = false; // Because of heic2any
+
 export const load: PageLoad = async ({ params }) => {
   const zodRes = z
     .object({