Enabling a WASM module to render svg images to png (#245)

Author: fforres

emails/templates/tickets/ticket-confirmation.tsx

@@ -54,12 +54,12 @@ export const TicketConfirmation = ({
             {eventName}
           </Text>
 
-          <Row>
+          <Container className="px-20 mb-16">
             <Img
-              className="px-20 mb-16"
-              src={`https://svg-renderer.communityos.io/qr/svg/${userTicketId}`}
+              className="w-full mx-auto"
+              src={`https://svg-renderer.communityos.io/qr/png/${userTicketId}`}
             />
-          </Row>
+          </Container>
 
           <Text className="text-xl mb-16">
             Recuerda llevar este ticket contigo el día del evento. <br />

package-lock.json

@@ -84,6 +84,7 @@
     "@pothos/plugin-authz": "^3.5.8",
     "@pothos/plugin-dataloader": "^3.19.0",
     "@pothos/plugin-tracing": "^0.5.8",
+    "@resvg/resvg-wasm": "^2.6.2",
     "@sanity/client": "^6.7.0",
     "@tsndr/cloudflare-worker-jwt": "^2.5.3",
     "@types/react": "^18.2.22",

package.json

@@ -1,9 +1,13 @@
+import { Resvg, initWasm } from "@resvg/resvg-wasm";
 import { Hono } from "hono";
 import { QR } from "qr-svg";
 
 import { createLogger } from "~/logging";
 import { isValidUUID } from "~/schema/shared/helpers";
 
+// @ts-expect-error This import actually exists
+import resvgwasm from "./index_bg.wasm";
+
 const app = new Hono();
 
 app.get("/qr/raw/:id", (c) => {
@@ -36,6 +40,48 @@ app.get("/qr/svg/:id", (c) => {
   return c.text(svg);
 });
 
+app.get("/qr/png/:id", async (c) => {
+  const logger = createLogger("qr-render-png");
+  const uuid = c.req.param("id").trim().toLowerCase();
+
+  if (!isValidUUID(uuid)) {
+    logger.error("Invalid id");
+    throw new Error("Invalid id");
+  }
+
+  try {
+    await initWasm(resvgwasm as WebAssembly.Module);
+  } catch (error) {
+    logger.error("Resvg wasm not initialized");
+  }
+
+  const svg = QR(uuid);
+
+  const resvg = new Resvg(svg, {
+    background: "white",
+    fitTo: {
+      mode: "width",
+      value: 1200,
+    },
+    font: {
+      loadSystemFonts: false,
+    },
+  });
+
+  const pngData = resvg.render();
+  const pngBuffer = pngData.asPng();
+
+  c.res.headers.set("Content-Type", "image/png");
+
+  return new Response(pngBuffer, {
+    headers: {
+      "Content-Type": "image/png",
+      "Cache-Control": "public, immutable, no-transform, max-age=31536000",
+    },
+    status: 200,
+  });
+});
+
 app.get("/", (c) => {
   return c.json({
     message: "Greetings and salutations from the CommunityOS team",