Unified Poster Image Generation Service for FoxFriend: Architecture, Implementation, and Optimization

The FoxFriend social product requires frequent generation of shareable poster images across iOS, Android, H5, and mini‑program platforms, making a unified solution essential for front‑end developers.

Existing client‑side approaches suffered from three major problems: each platform needed separate native code ( iOS , Android , H5 , mini‑program) preventing reuse; long or large images often caused crashes due to memory limits; and development efficiency was low, even with helpers like wxml-to-canvas , html-to-canvas , or canvas , which still lacked the expressive power of HTML+CSS .

To address these issues, the team built a unified poster service named hy-ssr-img based on Node.js and Puppeteer . The service renders HTML pages on the server (SSR) and captures screenshots, eliminating platform duplication, supporting extremely long images, and allowing developers to write ordinary HTML+CSS pages.

During project selection, several rendering options were evaluated. The team chose the Node.js screenshot approach because it leverages mature HTML+CSS rendering in browsers, avoids the limited expressiveness of server‑side drawing libraries, and integrates seamlessly with existing front‑end workflows.

The architecture places the Node.js screenshot service behind a mature Java backend that handles request validation and signing. The backend forwards rendering parameters to the Node.js service, which runs asynchronous screenshot tasks. Results are cached using a hash of the poster URL and parameters ( key ) and stored in a CDN/OSS. Load balancing across multiple instances (managed by pm2 ) and multi‑process deployment on DomeOS ensure high concurrency and low latency.

Performance optimizations include a “first‑screen only” SSR strategy that strips all unnecessary JavaScript, reduces network and disk I/O, and speeds up rendering from >1300 ms to ~600 ms for 5000‑pixel images, with support for images exceeding 10 000 pixels.

The engineering stack comprises Express for the API layer, Vue with vue-server-renderer for page development, Puppeteer for headless rendering, webpack for development tooling, OSS for image storage, and a logging pipeline built on Logstash , Kafka , Elasticsearch , and Kibana .

Logging is categorized into access, debug, and error logs, all integrated with the company’s log‑analysis platform to monitor request volume, performance, failures, and alerts.

Since launch, the service supports over 10 poster types across four platforms (H5, mini‑program, Android, iOS), generates more than 6000 images daily with an average rendering time of ~400 ms, and handles ultra‑long images up to 10 000+ pixels.

Future work aims to expose the service to external developers via remote component rendering and to provide a low‑code, drag‑and‑drop editor so product and operations teams can create posters without writing code.