Hi everyone 👋
I’m trying to generate a QR code with an embedded logo in the center and then upload the generated image file to Supabase Storage, but I’m running into issues.
Requirements:
What’s going wrong:
Things I’ve tried:
I suspect the issue is either:
If anyone has:
Please help 🙏
Thanks!
import { serve } from "https://deno.land/std@0.168.0/http/server.ts"
import { JSDOM } from "https://esm.sh/jsdom@21.1.0"
import QRCodeStyling from "https://esm.sh/qr-code-styling@1.9.2"
// 1. Helper to fetch and convert to Base64
async function getBase64(url: string) {
console.log("Internal buffer2:", getBase64);
const resp = await fetch(url);
const arrayBuffer = await resp.arrayBuffer();
const uint8 = new Uint8Array(arrayBuffer);
let b64 = "";
for (let i = 0; i < uint8.length; i++) b64 += String.fromCharCode(uint8[i]);
return `data:${resp.headers.get("content-type")};base64,${btoa(b64)}`;
}
serve(async (req) => {
try {
const { url = "https://supabase.com" } = await req.json().catch(() => ({}));
const logoUrl = "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg";
// Fetch image data first
const logoBase64 = await getBase64(logoUrl);
console.log("Internal buffer1:", logoBase64);
// 2. Setup DOM
const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
const { window } = dom;
// 3. Patch Globals
Object.assign(globalThis, {
window,
document: window.document,
HTMLElement: window.HTMLElement,
Node: window.Node,
XMLSerializer: window.XMLSerializer,
Image: window.Image, // Critical for logo handling
navigator: window.navigator,
});
const qrCode = new QRCodeStyling({
jsdom: JSDOM,
type: "svg", // Must be SVG for server-side stability
width: 300,
height: 300,
data: url,
// image: logoBase64, // Use Base64
dotsOptions: {
color: "#3ecf8e",
type: "extra-rounded"
},
imageOptions: {
hideBackgroundDots: true, // Your requirement
imageSize: 0.4,
margin: 5,
crossOrigin: "anonymous",
}
});
// 4. Generate as SVG string
const buffer = await qrCode.getRawData("svg");
console.log("Internal buffer3:", buffer);
return new Response(buffer, {
headers: { "Content-Type": "image/svg+xml" },
});
} catch (err: any) {
console.error("Internal Error:", err);
return new Response(
JSON.stringify({ error: err.message || "Unknown error" }),
{ status: 500 }
);
}
});
The user is trying to generate a QR code with an embedded logo and upload it to Supabase Storage. They are facing issues with the QR image generation and suspect problems with byte conversion or compatibility with Supabase. They seek examples or tips for embedding logos in QR codes and best practices for uploading images to Supabase Storage.
we are currently doing this before sending the QR in email. but not custom logo tho, just generix QR…
Got it, It because of branding purpose like snapchat, I have to build this