Building a Poster Rendering Service with Puppeteer

This article discusses the development of a poster rendering service using Puppeteer, a Node.js library that provides high-level APIs to control headless Chrome or Chromium. The service was created to address the limitations of using canvas API for generating share posters across multiple platforms (PC, H5, and mini-program).

The article begins by comparing canvas API with the new Node poster rendering service, highlighting the advantages of the latter, including easier learning curve, smaller code size, better readability, improved code reusability, better compatibility, and caching strategies using Redis.

The author then explains what Puppeteer is and its capabilities, such as generating screenshots or PDFs, automating form submissions, website performance analysis, and web scraping. The core of the article focuses on the design and implementation of the poster rendering service, which includes a caching mechanism using Redis and a CDN for storing generated images.

The service's workflow involves checking if a poster has been previously generated, using a SHA-256 hash of the HTML as a Redis key. If the poster exists in the cache, it returns the CDN URL; otherwise, it uses Puppeteer to generate the poster, uploads it to the CDN, and stores the URL in Redis.

The article also discusses the challenges faced during development, such as optimizing Chromium startup and execution, using the 'networkidle0' option for content loading, and implementing a timer-based refresh mechanism to prevent browser instances from becoming unresponsive or crashing.

Finally, the author looks ahead to future improvements, including increasing the service's QPS (queries per second) and implementing a scheduled task to pre-generate common posters during off-peak hours.