"You need to specify a canvas element" error when using Cloudflare Workers with qrcode

[bkyerv]

I am encountering an error when attempting to generate a QR code using the qrcode library within a Cloudflare Worker. The error message is "You need to specify a canvas element".

Error stack:

Error: You need to specify a canvas element
    at getCanvasElement (index.js:2058:15)
    at Object.render (index.js:2069:20)
    at renderToDataURL (index.js:2088:32)
    at renderCanvas (index.js:2214:18)
    at qr (index.js:2307:31)
    at new Promise (<anonymous>)
    at Object.fetch (index.js:2306:24)
    at async jsonError (index.js:2337:12) {
  stack: Error: You need to specify a canvas element
    at…306:24)
    at async jsonError (index.js:2337:12),
  message: You need to specify a canvas element
}

Environment:

Using Cloudflare Workers.
Implementing the server API of the qrcode library.

Steps to Reproduce:

Set up a Cloudflare Worker.
Integrate the qrcode library to generate a QR code.
Execute the worker function to generate the QR code.

Expected Result:
The QR code should be generated successfully.

Actual Result:
Encountering the above error, which seems to suggest a canvas element is required.

I would appreciate any guidance or suggestions on how to resolve this issue, especially considering the context of using Cloudflare Workers where a DOM-based canvas isn't available.

Thank you!

Below is the source code for the worker

export default {
	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
		
		if (request.method !== 'POST') {
			return new Response('Method not allowed', { status: 405 });
		}

		try {
			const payload = await request.json();
			
			const qr = await QRCode.toDataURL(payload.uniqueTitle, { type: 'image/webp' });
			
                        return new Response(qr);

		} catch (e) {
			console.error(e);
			return new Response(null, { status: 500});
		}
	},
};

[lexakozakov]

same here

[kamil-homernik]

I'm also looking for a solution to generate QR codes without access to DOM

[feri-irawan]

Try using node-canvas

[evanoxu]

same here

[techieshark]

Not a fix for this library, but if anyone is desperate here might be some leads

• https://github.com/naptestdev/qr-code-cloudflare-worker
• https://github.com/imbytecat/qr-code-worker
• https://github.com/rikkaneko/qrcode-gen

[abusedmedia]

A solution is just using QRCode.toString instead of QRCode.toDataURL.
You'll get an SVG instead of a PNG. Good enough for many cases.