feat(renderer): make logo optional

app.vue

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

server/api/index.ts

@@ -22,7 +22,7 @@ export default defineEventHandler(async (event) => {
   const { format, logo, content } = parsed.data;
 
   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);
 
   let image = canvas.toBuffer();

utils/renderer.ts

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

utils/settings.ts

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