How to Dynamically Generate QR Codes with Backgrounds and Export Them as Images

1. Generate QR Code

Use the qrcodejs plugin (GitHub: https://github.com/davidshimjs/qrcodejs/, documentation: http://code.ciaoca.com/javascript/qrcode/) to create a QR code. The first argument is the container element ID, the second is a configuration object. The library only supports foreground and background colors, so a logo is added by absolutely positioning it at the center of the QR code.

2. Convert DOM to Image

Render the DOM element containing the QR code onto a canvas using the html2canvas library (GitHub: https://github.com/niklasvh/html2canvas/, documentation: http://html2canvas.hertzen.com/). After rendering, call canvas.toDataURL() to obtain a base64‑encoded image URL and assign it to an <img> element’s src attribute.

3. Common Pitfalls and Solutions

Cross‑origin images : When the page loads images from another origin, the canvas becomes tainted and renders a black background. Set useCORS: true in the html2canvas options to allow loading cross‑origin images.

Image clarity : The default canvas size follows the DOM size, which may produce low‑resolution output. Double the canvas width and height attributes (e.g., set them to twice the DOM dimensions) while keeping the CSS size at the original scale to improve sharpness.

Hiding the source DOM : Using display:none makes the canvas render black. Instead, hide the element with z-index: -1 or move it off‑screen (e.g., top: 9999px) after the canvas is generated.

Long‑press save on mobile : Place the generated image layer above the UI with full transparency so that a long press triggers the image download without showing the overlay.

Base64 image saving limitations : Some browsers (e.g., Baidu Browser) cannot save base64 images directly. Converting the data URL to a Blob or uploading the image to a server before setting the src can work around this limitation.

4. Complete Process

The overall workflow is: generate the QR code with qrcodejs, overlay a logo, render the combined DOM to a canvas with html2canvas, adjust canvas dimensions for clarity, handle cross‑origin settings, hide the source DOM, and finally export the canvas as a shareable image.

Images illustrating each step are included in the original article.