Add logo support to QR API

Author: steven-tey

apps/web/app/api/qr/route.tsx

@@ -1,9 +1,9 @@
 import { handleAndReturnErrorResponse } from "@/lib/api/errors";
 import { ratelimitOrThrow } from "@/lib/api/utils";
-import { QRCodeSVG } from "@/lib/qr/utils";
+import { getQRAsSVG } from "@/lib/qr/api";
 import { getQRCodeQuerySchema } from "@/lib/zod/schemas/qr";
 import { getSearchParams } from "@dub/utils";
-import { ImageResponse } from "next/og";
+import { ImageResponse } from "@vercel/og";
 import { NextRequest } from "next/server";
 
 export const runtime = "edge";
@@ -16,28 +16,28 @@ export async function GET(req: NextRequest) {
     const { url, size, level, fgColor, bgColor, includeMargin } =
       getQRCodeQuerySchema.parse(params);
 
-    // const logo = req.nextUrl.searchParams.get("logo") || "https://assets.dub.co/logo.png";
+    const logo =
+      req.nextUrl.searchParams.get("logo") || "https://assets.dub.co/logo.png";
 
-    return new ImageResponse(
-      QRCodeSVG({
-        value: url,
-        size,
-        level,
-        includeMargin,
-        fgColor,
-        bgColor,
-        // imageSettings: {
-        //   src: logo,
-        //   height: size / 4,
-        //   width: size / 4,
-        //   excavate: true,
-        // },
-      }),
-      {
-        width: size,
-        height: size,
+    const svg = await getQRAsSVG({
+      value: url,
+      size,
+      level,
+      includeMargin,
+      fgColor,
+      bgColor,
+      imageSettings: {
+        src: logo,
+        height: size / 4,
+        width: size / 4,
+        excavate: true,
       },
-    );
+    });
+
+    return new ImageResponse(svg, {
+      width: size,
+      height: size,
+    });
   } catch (error) {
     return handleAndReturnErrorResponse(error);
   }

apps/web/lib/qr/api.tsx

@@ -0,0 +1,87 @@
+import qrcodegen from "./codegen";
+import {
+  DEFAULT_BGCOLOR,
+  DEFAULT_FGCOLOR,
+  DEFAULT_INCLUDEMARGIN,
+  DEFAULT_LEVEL,
+  DEFAULT_SIZE,
+  ERROR_LEVEL_MAP,
+  MARGIN_SIZE,
+} from "./constants";
+import { QRPropsSVG } from "./types";
+import { excavateModules, generatePath, getImageSettings } from "./utils";
+
+export async function getQRAsSVG(props: QRPropsSVG) {
+  const {
+    value,
+    size = DEFAULT_SIZE,
+    level = DEFAULT_LEVEL,
+    bgColor = DEFAULT_BGCOLOR,
+    fgColor = DEFAULT_FGCOLOR,
+    includeMargin = DEFAULT_INCLUDEMARGIN,
+    imageSettings,
+    ...otherProps
+  } = props;
+
+  let cells = qrcodegen.QrCode.encodeText(
+    value,
+    ERROR_LEVEL_MAP[level],
+  ).getModules();
+
+  const margin = includeMargin ? MARGIN_SIZE : 0;
+  const numCells = cells.length + margin * 2;
+  const calculatedImageSettings = getImageSettings(
+    cells,
+    size,
+    includeMargin,
+    imageSettings,
+  );
+
+  let image = <></>;
+  if (imageSettings != null && calculatedImageSettings != null) {
+    if (calculatedImageSettings.excavation != null) {
+      cells = excavateModules(cells, calculatedImageSettings.excavation);
+    }
+
+    const base64Image = await fetch(
+      `https://wsrv.nl/?url=${imageSettings.src}&w=100&h=100&encoding=base64`,
+    ).then((res) => res.text());
+
+    image = (
+      <image
+        href={base64Image}
+        height={calculatedImageSettings.h}
+        width={calculatedImageSettings.w}
+        x={calculatedImageSettings.x + margin}
+        y={calculatedImageSettings.y + margin}
+        preserveAspectRatio="none"
+      />
+    );
+  }
+
+  // Drawing strategy: instead of a rect per module, we're going to create a
+  // single path for the dark modules and layer that on top of a light rect,
+  // for a total of 2 DOM nodes. We pay a bit more in string concat but that's
+  // way faster than DOM ops.
+  // For level 1, 441 nodes -> 2
+  // For level 40, 31329 -> 2
+  const fgPath = generatePath(cells, margin);
+
+  return (
+    <svg
+      height={size}
+      width={size}
+      viewBox={`0 0 ${numCells} ${numCells}`}
+      xmlns="http://www.w3.org/2000/svg"
+      {...otherProps}
+    >
+      <path
+        fill={bgColor}
+        d={`M0,0 h${numCells}v${numCells}H0z`}
+        shapeRendering="crispEdges"
+      />
+      <path fill={fgColor} d={fgPath} shapeRendering="crispEdges" />
+      {image}
+    </svg>
+  );
+}

apps/web/package.json

@@ -41,7 +41,7 @@
     "@vercel/edge": "^0.3.1",
     "@vercel/edge-config": "^0.4.1",
     "@vercel/functions": "^1.0.1",
-    "@vercel/og": "^0.6.2",
+    "@vercel/og": "^0.6.3",
     "@visx/axis": "^2.14.0",
     "@visx/curve": "^3.3.0",
     "@visx/event": "^2.6.0",