From ad0f3ff9504743ca1136645c0526d054cebfa62b Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Fri, 31 Jan 2025 00:37:23 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80/=EB=B9=84=EB=94=94?=
 =?UTF-8?q?=EC=98=A4=20=EC=8D=B8=EB=84=A4=EC=9D=BC=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/modules/thumbnail.ts | 76 ++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 src/lib/modules/thumbnail.ts

diff --git a/src/lib/modules/thumbnail.ts b/src/lib/modules/thumbnail.ts
new file mode 100644
index 0000000..30e931e
--- /dev/null
+++ b/src/lib/modules/thumbnail.ts
@@ -0,0 +1,76 @@
+const scaleSize = (width: number, height: number, targetSize: number) => {
+  if (width <= targetSize || height <= targetSize) {
+    return { width, height };
+  }
+
+  const scale = targetSize / Math.min(width, height);
+  return {
+    width: Math.round(width * scale),
+    height: Math.round(height * scale),
+  };
+};
+
+export const generateImageThumbnail = (imageUrl: string) => {
+  return new Promise<Blob>((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => {
+      const canvas = document.createElement("canvas");
+      const { width, height } = scaleSize(image.width, image.height, 250);
+
+      canvas.width = width;
+      canvas.height = height;
+
+      const context = canvas.getContext("2d");
+      if (!context) {
+        return reject(new Error("Failed to generate thumbnail"));
+      }
+
+      context.drawImage(image, 0, 0, width, height);
+      canvas.toBlob((blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error("Failed to generate thumbnail"));
+        }
+      }, "image/webp");
+    };
+    image.onerror = reject;
+
+    image.src = imageUrl;
+  });
+};
+
+export const generateVideoThumbnail = (videoUrl: string, time = 0) => {
+  return new Promise<Blob>((resolve, reject) => {
+    const video = document.createElement("video");
+    video.onloadeddata = () => {
+      video.currentTime = time;
+    };
+    video.onseeked = () => {
+      const canvas = document.createElement("canvas");
+      const { width, height } = scaleSize(video.videoWidth, video.videoHeight, 250);
+
+      canvas.width = width;
+      canvas.height = height;
+
+      const context = canvas.getContext("2d");
+      if (!context) {
+        return reject(new Error("Failed to generate thumbnail"));
+      }
+
+      context.drawImage(video, 0, 0, width, height);
+      canvas.toBlob((blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error("Failed to generate thumbnail"));
+        }
+      }, "image/webp");
+    };
+    video.onerror = reject;
+
+    video.muted = true;
+    video.playsInline = true;
+    video.src = videoUrl;
+  });
+};