Poster Generation: Techniques, Libraries, and Common Issues

This article discusses the generation of customized posters combining a background image and a QR code, covering implementation approaches on the server side, client side (native), and frontend.

On the server side, headless browsers like Puppeteer render the poster and screenshot it; efficiency depends on server performance. An alternative is to treat the background as an image and the QR code as a watermark using third‑party image watermarking capabilities.

Client‑side generation leverages device CPU/GPU for high efficiency but incurs higher maintenance costs due to platform‑specific implementations.

Frontend solutions range from low‑level Canvas API to higher‑level libraries. The Canvas API requires manual drawing and uses canvas.toDataURL to export the image.

Three categories of JS libraries are presented: (1) wrappers around Canvas API exemplified by Fabric.js , offering rich graphics and interactivity; (2) DOM‑to‑Canvas engines like html2canvas that reimplement a rendering engine; (3) DOM‑to‑SVG‑to‑Canvas approaches using foreignObject such as dom-to-image .

A comparison table outlines trade‑offs in generation speed, poster quality, compatibility, and other factors for server, client, and frontend approaches.

The article details usage and principles of each library, including code snippets for creating a canvas, initializing Fabric.js, invoking html2canvas , and using dom-to-image .

Common issues are examined: cross‑domain image loading (solutions: setting img.crossOrigin = 'anonymous' or using libraries with built‑in timestamp‑based requests), html2canvas white‑screen when scrolling (fix: adjust y offset with scrollTop), and object‑fit not working in html2canvas (work‑arounds: use background‑image mode or SVG‑based libraries).

Finally, a selection guide recommends server‑side generation for complex layouts and stable performance, client‑side for interactive or pixel‑perfect needs, and frontend for ordinary layouts or high concurrency, with specific library suggestions ( html2canvas or modern-screenshot for general use, Fabric.js for deep customization).