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

feat(renderer): make logo optional

Browse Source
This commit is contained in:
Pihkaal
2024-10-12 17:05:56 +02:00
parent 1dfae1a9f5
commit 7b79354e84
4 changed files with 35 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app.vue
View File

@@ -23,7 +23,10 @@ const state = reactive({
}); });
const isValidState = computed( const isValidState = computed(
() => state.content && state.logo && state.format, () =>
state.content &&
((state.hasLogo && state.logo) || !state.hasLogo) &&
state.format,
); );
const BASE_API_URL = "http://localhost:3000/api"; const BASE_API_URL = "http://localhost:3000/api";
@@ -32,7 +35,7 @@ const apiUrl = computed(() => {
if (!isValidState.value) return ""; if (!isValidState.value) return "";
const params = new URLSearchParams({ const params = new URLSearchParams({
logo: state.logo, ...(state.hasLogo && { logo: state.logo }),
format: state.format, format: state.format,
content: state.content, content: state.content,
}); });
@@ -45,7 +48,7 @@ const updateQRCode = async () => {
if (!isValidState.value) return; if (!isValidState.value) return;
const logoUrl = `/logos/${state.logo}.png`; const logoUrl = state.hasLogo ? `/logos/${state.logo}.png` : undefined;
await renderQRCodeToCanvas(canvas.value, state.content, logoUrl); await renderQRCodeToCanvas(canvas.value, state.content, logoUrl);
qrCode.value = canvas.value.toDataURL(`image/${state.format}`); qrCode.value = canvas.value.toDataURL(`image/${state.format}`);
@@ -134,6 +137,7 @@ const arrayToUnion = (array: string[]) =>
v-model="state.hasLogo" v-model="state.hasLogo"
class="mb-1.5" class="mb-1.5"
label="Logo" label="Logo"
@change="updateQRCode"
/> />
</template> </template>

2
server/api/index.ts
View File

@@ -22,7 +22,7 @@ export default defineEventHandler(async (event) => {
const { format, logo, content } = parsed.data; const { format, logo, content } = parsed.data;
const canvas = createCanvas(CANVAS_SIZE, CANVAS_SIZE); const canvas = createCanvas(CANVAS_SIZE, CANVAS_SIZE);
const logoUrl = resolve("public", `logos/${logo}.png`); const logoUrl = logo ? resolve("public", `logos/${logo}.png`) : undefined;
await renderQRCodeToCanvas(canvas, content, logoUrl); await renderQRCodeToCanvas(canvas, content, logoUrl);
let image = canvas.toBuffer(); let image = canvas.toBuffer();

4
utils/renderer.ts
View File

@@ -7,7 +7,7 @@ export const LOGO_PADDING = 1;
export const renderQRCodeToCanvas = async ( export const renderQRCodeToCanvas = async (
canvas: HTMLCanvasElement | Canvas, canvas: HTMLCanvasElement | Canvas,
content: string, content: string,
logoUrl: string, logoUrl: string | undefined,
) => { ) => {
await QRCode.toCanvas(canvas, content, { await QRCode.toCanvas(canvas, content, {
errorCorrectionLevel: "H", errorCorrectionLevel: "H",
@@ -15,6 +15,7 @@ export const renderQRCodeToCanvas = async (
margin: 1, margin: 1,
}); });
if (logoUrl) {
const qrCode = QRCode.create(content, { errorCorrectionLevel: "H" }); const qrCode = QRCode.create(content, { errorCorrectionLevel: "H" });
const moduleCount = qrCode.modules.size + 2; const moduleCount = qrCode.modules.size + 2;
@@ -42,4 +43,5 @@ export const renderQRCodeToCanvas = async (
backgroundSize, backgroundSize,
); );
ctx.drawImage(logoImage, logoPosition, logoPosition, logoSize, logoSize); ctx.drawImage(logoImage, logoPosition, logoPosition, logoSize, logoSize);
}
}; };

2
utils/settings.ts
View File

@@ -54,7 +54,7 @@ export type ImageFormat = (typeof IMAGE_FORMATS)[number];
export const settingsSchema = z.object({ export const settingsSchema = z.object({
format: z.enum(IMAGE_FORMATS).default("png"), format: z.enum(IMAGE_FORMATS).default("png"),
logo: z.enum(LOGOS), logo: z.enum(LOGOS).optional(),
content: z.string().min(1, "Required"), content: z.string().min(1, "Required"),
}); });