@blockspoon/cert-badge-renderer 1.0.4 → 1.0.5

package/README.md

@@ -22,7 +22,7 @@ npm install @blockspoon/cert-badge-renderer
 
 ## 📝 사용법 예제
 
-### 1. 인증서 또는 배지 HTML 생성
+### 1. 인증서 또는 배지 객체 기반으로 HTML 생성하기
 
 ```ts
 import { generateAchievementHTML } from "@blockspoon/cert-badge-renderer/browser";
@@ -34,7 +34,7 @@ const html = await generateAchievementHTML(achievement, {
 });
 ```
 
-### 2. 인증서 또는 배지 PNG 이미지 생성
+<!-- ### 2. 인증서 또는 배지 PNG 이미지 생성
 
 ```ts
 import { generateAchievementFile } from "@blockspoon/cert-badge-renderer/server";
@@ -49,21 +49,21 @@ const result = await generateAchievementFile(achievement, {
 // Base64 저장 예시
 const base64 = result.base64.replace(/^data:image\/png;base64,/, "");
 require("fs").writeFileSync("certificate.png", Buffer.from(base64, "base64"));
-```
+``` -->
 
-### 3. 디자인(JSON) 기반으로 HTML 생성하기
+### 2. 디자인 객체 기반으로 HTML 생성하기
 
 ```ts
 import { generateDesignHTML } from "@blockspoon/cert-badge-renderer/browser";
 
 // certificateDesign: https://developers.kolleges.net/docs/design_get_certificate#certificatedesign-object
 // badgeDesign: https://developers.kolleges.net/docs/design_get_badge#badgedesign-object
-const html = await generateDesignHTML(certificateDesign || badgeDesign);
-
-require("fs").writeFileSync("badge.html", html, "utf-8");
+const html = await generateDesignHTML(certificateDesign || badgeDesign, {
+  size: 600, // 렌더링 크기 (px)
+});
 ```
 
-### 4. 디자인(JSON) 기반으로 PNG 생성하기
+<!-- ### 4. 디자인(JSON) 기반으로 PNG 생성하기
 
 ```ts
 import { generateDesignFile } from "@blockspoon/cert-badge-renderer/server";
@@ -75,7 +75,7 @@ const png = await generateDesignFile(certificateDesign || badgeDesign);
 require("fs").writeFileSync("badge.png", png.buffer);
 ```
 
----
+--- -->
 
 ## 🔐 API Key 사용 방식
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockspoon/cert-badge-renderer",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Render certificate and badge designs from Kolleges achievement data into HTML, PNG, or Base64.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/browser/index.ts

@@ -1,2 +1,3 @@
 // ✅ src/browser/index.ts
 export { generateAchievementHTML } from "../utils/generateAchievementHTML";
+export { generateDesignHTML } from "../utils/generateDesignHTML";

package/src/utils/generateDesignHTML.ts

@@ -14,38 +14,6 @@ import {
 import Certificates from "../templates/certificates";
 import { portraitComponents } from "../constants/componentsDirection";
 
-async function convertImageToBase64(url: string): Promise<string> {
-  try {
-    // URL이 이미 baseUrl을 포함하고 있는지 확인
-    let finalUrls = [];
-    finalUrls = url.split("https://");
-    const finalUrl = "https://" + finalUrls.pop();
-
-    const response = await fetch(finalUrl, {
-      credentials: "include",
-      headers: {
-        Accept: "image/*",
-      },
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    const contentType = response.headers.get("content-type");
-    if (!contentType?.startsWith("image/")) {
-      throw new Error(`Not an image! content-type: ${contentType}`);
-    }
-
-    const buffer = await response.arrayBuffer();
-    const base64 = Buffer.from(buffer).toString("base64");
-    return `data:${contentType};base64,${base64}`;
-  } catch (error) {
-    console.error(`이미지 변환 실패: ${url}`, error);
-    return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
-  }
-}
-
 export async function generateDesignHTML(
   data: IAchievementDesignItem,
   options: DesignOptions = {}
@@ -283,19 +251,19 @@ export async function generateDesignHTML(
         }
       } else if (element.src) {
         // 이미지를 base64로 변환
-        const base64Image = await convertImageToBase64(element.src);
+        // const base64Image = await convertImageToBase64(element.src);
         html += `<img
-            src="${base64Image}"
-            alt="Uploaded"
-            style="
-              width: 100%;
-              height: 100%;
-              max-width: 100%;
-              max-height: 100%;
-              object-fit: contain;
-              align-self: center;
-            "
-          />`;
+          src="${element.src}"
+          alt="Uploaded"
+          style="
+            width: 100%;
+            height: 100%;
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+            align-self: center;
+          "
+        />`;
       }
       html += `</div>`;
     }