sulthan/internify-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update certificate verification and display components with improved layout and data handling

Browse Source
This commit is contained in:
Kemas M. Aryadary Rasyad
2026-07-28 16:17:46 +07:00
parent 1ee784e70d
commit 09ddb21159
9 changed files with 120 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Pages/utils/SertificateGenerator.ts
+23 -7
View File
@@ -1,7 +1,8 @@
import { resolveFileUrl } from "./resolveFileFromUrl";
import QRCode from "qrcode";
export function loadImage(src: string): Promise<HTMLImageElement> {
//LOAD IMAGE TEMPLATE
function loadImage(src: string): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
const img = new Image();
if (!src.startsWith("data:")) img.crossOrigin = "anonymous";
@@ -11,7 +12,8 @@ export function loadImage(src: string): Promise<HTMLImageElement> {
});
}
export async function ensureFontsLoaded(): Promise<void> {
//LOAD FONT UNTUK MENCEGAH FONT TERGANTI
async function ensureFontsLoaded(): Promise<void> {
await Promise.all([
document.fonts.load('105px "Great Vibes"'),
document.fonts.load('54px "Grenze"'),
@@ -19,16 +21,30 @@ export async function ensureFontsLoaded(): Promise<void> {
await document.fonts.ready;
}
// LAYOUT DEFAULT SERTIFIKAT YANG AKAN DIGENERATE
const LAYOUT = {
internName: { x: 0.57, y: 0.48, size: 140, font: "Great Vibes", color: "#800000" },
internName: { x: 0.54, y: 0.5, size: 130, font: "Great Vibes", color: "#800000" },
internNameSmall: { x: 0.82, y: 0.889, size: 47, font: "Great Vibes", color: "#090909" },
projectName: { x: 0.815, y: 0.598, size: 46, font: "Grenze", color: "#800000" },
duration: { x: 0.7, y: 0.645, size: 48, font: "Grenze", color: "#090909" },
certNo: { x: 0.597, y: 0.305, size: 50, font: "Grenze", color: "#090909" },
certNo: { x: 0.56, y: 0.305, size: 50, font: "Grenze", color: "#090909" },
certNoSmall: { x: 0.827, y: 0.92, size: 32, font: "Grenze", color: "#090909"},
qr: { x: 0.77, y: 0.715, size: 0.103 },
};
// HELPER: kurangi ukuran font 25% jika nama melebihi 22 karakter (termasuk spasi)
function fitNameText(name: string, baseSize: number): number {
const SAFE_LENGTH = 24;
const REDUCTION_PER_CHAR = 0.032;
const MIN_SCALE = 0.75;
const length = name.length;
if (length <= SAFE_LENGTH) return baseSize;
const scale = Math.max(1 - (length - SAFE_LENGTH) * REDUCTION_PER_CHAR, MIN_SCALE);
return baseSize * scale;
}
//MAIN FUNCTION: generasi sertifikat intern formatted
export async function generateCertificate(
templateUrl: string,
internName: string,
@@ -52,7 +68,8 @@ export async function generateCertificate(
cfg: { x: number; y: number; size: number; font: string; color: string },
value: string,
) => {
ctx.font = `400 ${cfg.size}px "${cfg.font}", serif`;
const size = cfg === LAYOUT.internName ? fitNameText(value, cfg.size) : cfg.size;
ctx.font = `400 ${size}px "${cfg.font}", serif`;
ctx.fillStyle = cfg.color;
ctx.fillText(value, canvas.width * cfg.x, canvas.height * cfg.y);
};
@@ -62,9 +79,8 @@ export async function generateCertificate(
text(LAYOUT.projectName, projectName);
text(LAYOUT.duration, ProjectDuration);
text(LAYOUT.certNo, certificateNo);
text(LAYOUT.certNoSmall, "No.2026/SPI3/" + certificateNo);
text(LAYOUT.certNoSmall, certificateNo);
// QR code — nanti akan diganti ke alamat domain
const qrSize = Math.round(canvas.width * LAYOUT.qr.size);
const qrDataUrl = await QRCode.toDataURL(
`${window.location.origin}/verify-certificate/${verifyUrl}`,