$ show qq15725/modern-screenshot
modern-screenshot is a client-side JavaScript library that renders DOM nodes into image formats (PNG, JPEG, WebP, SVG) using HTML5 Canvas and SVG ForeignObject. It clones a DOM subtree, captures computed styles (including pseudo-elements, scrollbars, CSS custom properties), embeds external resources (images, fonts, SVG symbols), and produces a bitmap or data URL. The architecture is modular: a recursive clone phase captures structure and styles, an embedding phase resolves and inlines external assets, and a rendering phase converts the cloned DOM to a Canvas via an intermediate SVG foreignObject. It supports Web Workers for parallel resource fetching, singleton context for repeated screenshots, DPI control via PNG/JFIF metadata injection, and comprehensive edge cases (shadow DOM, cross-origin iframes, @font-face with CSS layers, and Safari/Firefox quirks). The codebase is well-structured, thoroughly tested with Puppeteer-based image snapshot tests, and actively maintained.
The LLM identified 5 files worth highlighting for reuse:
Recursively clones a DOM subtree, capturing computed CSS styles, handling pseudo-elements, input values, scroll position restoration, and font family tracking. It is the core of the screenshot pipeline and could be extracted as a generic 'DOM snapshot/serializer' for other tools requiring a faithful in-memory copy of a DOM tree with styles.
Computes the difference between a node's computed style and its default style for a given tag, considering inherited properties from parent nodes. It removes transitional/animation properties and applies Chrome-specific fixes. This component is reusable for any CSS extraction task where only the explicitly set styles are needed.
Traverses document stylesheets, resolves @import and @font-face rules, fetches font data, optionally minifies fonts, and generates inline CSS for embedding into the screenshot SVG. It handles CSS layers, cross-origin font URLs, and preferred format filtering. The logic for parsing and rewriting font-face rules is self-contained and reusable for other document-to-image or font-subsetting tools.
Injects or overwrites the pHYs (physical pixel dimensions) chunk into a PNG byte array to set DPI. It includes CRC calculation, base64 chunk detection, and handles both insertion and overwriting. This low-level routine is directly reusable for any project that needs to programmatically set PNG DPI without a full image library.
A thin wrapper around `fetch` that provides per-URL caching, Web Worker offloading for HTTP requests (with a round-robin worker pool), image-specific accept headers, font minification support, and placeholder fallback. It decouples resource fetching from the main screenshot logic and can be reused as a fetch utility with worker support in other browser-based tools.