pihkaal/simple-qr
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: same code to render from both client and server

Browse Source
This commit is contained in:
Pihkaal
2024-09-30 05:13:38 +02:00
parent 58d8342538
commit fafbc9253e
7 changed files with 1572 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
server/api/index.ts
View File

@@ -1,23 +1,8 @@
import { createCanvas, loadImage } from "canvas";
import QRCode from "qrcode";
import { z } from "zod";
import { createCanvas } from "canvas";
import { resolve } from "path";
import sharp from "sharp";
const time = (label: string) => {
const start = performance.now();
return () => {
console.log(`${label}\t${performance.now() - start}`);
};
};
const IMAGE_FORMATS = ["jpeg", "png", "webp"] as const;
const settingsSchema = z.object({
format: z.enum(IMAGE_FORMATS).default("png"),
logo: z.string().min(1),
content: z.string().min(1),
});
import { CANVAS_SIZE, renderQRCodeToCanvas } from "~/utils/renderer";
import { settingsSchema } from "~/utils/settings";
export default defineEventHandler(async (event) => {
const query = getQuery(event);
@@ -36,66 +21,15 @@ export default defineEventHandler(async (event) => {
const { format, logo, content } = parsed.data;
const tt = time("total");
let t;
const canvas = createCanvas(CANVAS_SIZE, CANVAS_SIZE);
const logoUrl = resolve("public", `${logo}.png`);
await renderQRCodeToCanvas(canvas, content, logoUrl);
const SIZE = 1000;
const LOGO_PADDING = 1;
t = time("render");
const canvas = createCanvas(SIZE, SIZE);
await QRCode.toCanvas(canvas, content, {
errorCorrectionLevel: "H",
width: SIZE,
margin: 1,
});
t();
t = time("count");
const qrCode = QRCode.create(content, { errorCorrectionLevel: "H" });
const moduleCount = qrCode.modules.size + 2;
t();
t = time("logo");
const logoImage = await loadImage(resolve("public", `${logo}.png`));
const moduleSize = SIZE / moduleCount;
let logoModules = Math.floor(moduleCount * 0.3);
if (logoModules % 2 !== moduleCount % 2) {
logoModules += 1;
}
const backgroundSize = logoModules * moduleSize + 1;
const backgroundPosition = (moduleSize * (moduleCount - logoModules)) / 2;
const logoSize = backgroundSize - LOGO_PADDING * 2;
const logoPosition = backgroundPosition + LOGO_PADDING;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(
backgroundPosition,
backgroundPosition,
backgroundSize,
backgroundSize,
);
ctx.drawImage(logoImage, logoPosition, logoPosition, logoSize, logoSize);
t();
t = time("buffer");
let image = canvas.toBuffer();
t();
if (format !== "png") {
t = time("convert");
image = await sharp(image).toFormat(format).toBuffer();
t();
}
tt();
event.node.res.setHeader("Content-Type", `image/${format}`);
return image;
});