@blockspoon/cert-badge-renderer 1.0.4 → 1.0.7

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/dist/browser/index.d.ts

@@ -1 +1,2 @@
 export { generateAchievementHTML } from "../utils/generateAchievementHTML";
+export { generateDesignHTML } from "../utils/generateDesignHTML";

package/dist/browser/index.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateAchievementHTML = void 0;
+exports.generateDesignHTML = exports.generateAchievementHTML = void 0;
 // ✅ src/browser/index.ts
 var generateAchievementHTML_1 = require("../utils/generateAchievementHTML");
 Object.defineProperty(exports, "generateAchievementHTML", { enumerable: true, get: function () { return generateAchievementHTML_1.generateAchievementHTML; } });
+var generateDesignHTML_1 = require("../utils/generateDesignHTML");
+Object.defineProperty(exports, "generateDesignHTML", { enumerable: true, get: function () { return generateDesignHTML_1.generateDesignHTML; } });

package/dist/utils/generateDesignHTML.js

@@ -19,36 +19,6 @@ const qrcode_1 = __importDefault(require("qrcode"));
 const svgTemplate_1 = require("../templates/svgTemplate");
 const certificates_1 = __importDefault(require("../templates/certificates"));
 const componentsDirection_1 = require("../constants/componentsDirection");
-function convertImageToBase64(url) {
-    return __awaiter(this, void 0, void 0, function* () {
-        try {
-            // URL이 이미 baseUrl을 포함하고 있는지 확인
-            let finalUrls = [];
-            finalUrls = url.split("https://");
-            const finalUrl = "https://" + finalUrls.pop();
-            const response = yield 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 === null || contentType === void 0 ? void 0 : contentType.startsWith("image/"))) {
-                throw new Error(`Not an image! content-type: ${contentType}`);
-            }
-            const buffer = yield 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=";
-        }
-    });
-}
 function generateDesignHTML(data_1) {
     return __awaiter(this, arguments, void 0, function* (data, options = {}) {
         const { size = 600, noSpace = false } = options;
@@ -251,19 +221,19 @@ function generateDesignHTML(data_1) {
                 }
                 else if (element.src) {
                     // 이미지를 base64로 변환
-                    const base64Image = yield 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>`;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockspoon/cert-badge-renderer",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "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>`;
     }