wasm-html-to-image 1.0.16 → 1.0.17

package/dist/cli-options.d.ts

@@ -25,7 +25,16 @@ export interface CliFlags {
     animationLoop?: number;
     /** `--font <path-or-glob>` (repeatable); local font files to register. */
     font?: string[];
+    /** `--js`: run the page's scripts (jsdom) before rendering. */
+    js?: boolean;
+    /** `--js-wait <ms|selector>`: a number is the settle time after load, anything else a CSS selector to wait for. */
+    jsWait?: string;
 }
+/** `--js-wait`: milliseconds to settle after load, or a CSS selector to wait for. */
+export declare function resolveJavaScript(wait: string | undefined): true | {
+    settleMs?: number;
+    waitFor?: string;
+};
 /** Default frame rate for `--animation` when `--animation-fps` is omitted. */
 export declare const DEFAULT_ANIMATION_FPS = 15;
 /**
@@ -57,7 +66,10 @@ export declare function isInlineHtml(input: string): boolean;
 export declare function readStdin(): Promise<string>;
 /** Expand `*` / `?` in the last path segment; other patterns are literal paths. */
 export declare function expandGlob(pattern: string): Promise<string[]>;
-/** Load `--font` files; each is named after its file (without extension). */
+/**
+ * Load `--font` files. Each is named after its file (without extension), or after the family
+ * given as `Family Name=path` (use it to stand in for a system font such as `Segoe UI`).
+ */
 export declare function loadFonts(patterns: string[]): Promise<{
     name: string;
     data: Uint8Array;

package/dist/cli-options.js

@@ -7,6 +7,12 @@
 import fs from "node:fs/promises";
 import path from "node:path";
 import { isImageInput } from "./input.js";
+/** `--js-wait`: milliseconds to settle after load, or a CSS selector to wait for. */
+export function resolveJavaScript(wait) {
+    if (wait === undefined || wait === "")
+        return true;
+    return /^\d+(\.\d+)?$/.test(wait) ? { settleMs: Number(wait) } : { waitFor: wait };
+}
 /** Default frame rate for `--animation` when `--animation-fps` is omitted. */
 export const DEFAULT_ANIMATION_FPS = 15;
 /** Map `--animation` / `--animation-fps` / `--animation-loop` to the `render()` animation option. */
@@ -88,17 +94,24 @@ export async function expandGlob(pattern) {
         .sort()
         .map((n) => path.join(dir, n));
 }
-/** Load `--font` files; each is named after its file (without extension). */
+/**
+ * Load `--font` files. Each is named after its file (without extension), or after the family
+ * given as `Family Name=path` (use it to stand in for a system font such as `Segoe UI`).
+ */
 export async function loadFonts(patterns) {
     const fonts = [];
-    for (const pattern of patterns) {
+    for (const spec of patterns) {
+        // `Family=path`: a drive letter (`C:\...`) has no `=`, so the first `=` splits family and path.
+        const eq = spec.indexOf("=");
+        const family = eq > 0 ? spec.slice(0, eq).trim() : undefined;
+        const pattern = eq > 0 ? spec.slice(eq + 1) : spec;
         const files = await expandGlob(pattern);
         if (files.length === 0) {
             console.warn(`wasm-html-to-image: no font files match "${pattern}"`);
         }
         for (const file of files) {
             fonts.push({
-                name: path.basename(file, path.extname(file)),
+                name: family ?? path.basename(file, path.extname(file)),
                 data: new Uint8Array(await fs.readFile(file)),
             });
         }
@@ -162,5 +175,6 @@ export async function buildRenderOptions(input, flags) {
         ...(flags.dpi !== undefined ? { dpi: flags.dpi } : {}),
         ...(animation ? { animation } : {}),
         ...(fonts.length ? { fonts } : {}),
+        ...(flags.js ? { javascript: resolveJavaScript(flags.jsWait) } : {}),
     };
 }

package/dist/cli.js

@@ -31,7 +31,7 @@ program
     .option("-w, --width <number>", "viewport width", (v) => parseInt(v, 10), 800)
     .option("-h, --height <number>", "viewport height (omit for auto)", (v) => parseInt(v, 10))
     .option("-f, --format <format>", `output format (${OUTPUT_FORMATS.join(", ")}); default: from the --output extension, else png`)
-    .option("--font <path>", "local font file or glob such as './fonts/*.woff2' (repeatable)", (v, prev = []) => [...prev, v])
+    .option("--font <path>", "local font file or glob such as './fonts/*.woff2' (repeatable); 'Family=path' registers it under that family name, e.g. 'Segoe UI=C:/Windows/Fonts/segoeui.ttf'", (v, prev = []) => [...prev, v])
     .option("-q, --quality <number>", "encode quality 0-100 (encode stage only)", (v) => parseFloat(v), 85)
     .option("--base-url <url>", "base URL for relative resources (URL input: defaults to the post-redirect document URL; file input: defaults to the file's directory)")
     .option("--color-space <srgb|cmyk>", "output color space of tiff and pdf (default srgb; cmyk rewrites colors for print, with no ICC profile)", (v) => v.toLowerCase())
@@ -40,6 +40,8 @@ program
     .option("--animation <duration-ms>", "sample the document's @keyframes opacity / transform / color animation into an animated WebP / APNG / GIF; one loop duration in ms (webp, apng and gif output only; the CSS animation-duration wins and this value is an upper bound)", (v) => parseInt(v, 10))
     .option("--animation-fps <n>", "animation frame rate (default 15, capped at ~75 frames total; requires --animation)", (v) => parseInt(v, 10))
     .option("--animation-loop <n>", "how many times the animated WebP / APNG / GIF repeats (0 = infinite, the default; 1 = play once; requires --animation)", (v) => parseInt(v, 10))
+    .option("--js", "run the page's scripts in jsdom before rendering (needs the optional peer dependency jsdom; trusted pages only)")
+    .option("--js-wait <ms|selector>", "with --js: milliseconds to wait after load (default 1000), or a CSS selector to wait for")
     .action(async (input, options) => {
     try {
         const format = String(options.format ?? inferFormat(options.output) ?? "png").toLowerCase();
@@ -84,6 +86,8 @@ program
             animationFps: options.animationFps,
             animationLoop: options.animationLoop,
             font: options.font,
+            js: options.js,
+            jsWait: options.jsWait,
         };
         const result = await render(await buildRenderOptions(input, flags));
         await fs.writeFile(outputPath, typeof result.data === "string"

package/dist/core.d.ts

@@ -76,6 +76,13 @@ export interface LayoutBox {
     h: number;
 }
 export interface HtmlToImageOptions extends RenderOptions {
+    /**
+     * Run the page's scripts before rendering (Node only; `single` entry point and the CLI's `--js`).
+     * The page is loaded into jsdom (optional peer dependency `jsdom`), its scripts run, and the resulting
+     * DOM is rendered. `true` waits for `load` plus 1 s; pass `{ timeout, settleMs, waitFor }` to tune it.
+     * jsdom has no layout and is not a security sandbox: only use it with pages you trust.
+     */
+    javascript?: boolean | import("./js-page.js").JavaScriptOptions;
     /** Encode quality 0-100 (encode stage only, default 85; ignored for svg/pdf). */
     quality?: number;
     /** Encode speed 0-10 for AVIF, JXL and animated (lossy) WebP (encode stage only; default 8 for AVIF, 6 otherwise). Animated WebP uses libwebp method `8 - speed`: the default 6 is method 2, 5 is method 3 (Skia's, smaller by ~4%), 9 is method 0 (fastest, ~30% larger). */