wasm-html-to-image 1.0.7 → 1.0.9

package/README.md

@@ -121,7 +121,9 @@ npx wasm-html-to-image loader.html -o loader.gif -f gif --animation 2000
 - **Image Buffer / Data URL**: `PNG`, `JPEG`, `WebP`, `GIF`, `AVIF`, `JXL`, `BMP`.
 
 ### Outputs (`format`)
-`png`, `jpeg`, `webp`, `avif`, `jxl`, `apng`, `gif`, `svg`, `pdf`, `thumbhash`, `raw` (uncompressed RGBA).
+`png`, `jpeg`, `webp`, `avif`, `jxl`, `apng`, `gif`, `tiff`, `svg`, `pdf`, `thumbhash`, `raw` (uncompressed RGBA).
+
+**Print colors:** `format: "tiff"` keeps RGBA; add `colorSpace: "cmyk"` (CLI: `--color-space cmyk`) to get a CMYK TIFF, or a PDF whose colors and images are DeviceCMYK. The conversion is the plain device formula (no ICC profile), so convert with your print shop's profile if you need exact press colors.
 
 Every call returns a `RenderResult` object:
 ```typescript

package/dist/cli-options.d.ts

@@ -8,6 +8,8 @@ export interface CliFlags {
     quality: number;
     /** Explicit `--base-url`; absent means "let the source decide". */
     baseUrl?: string;
+    /** `--color-space <srgb|cmyk>`; absent means the default (srgb). */
+    colorSpace?: "srgb" | "cmyk";
     /** `--animation <duration-ms>`; absent means "no keyframe animation". */
     animation?: number;
     /** `--animation-fps <n>`; defaults to 15 when `--animation` is set. */

package/dist/cli-options.js

@@ -85,6 +85,7 @@ export async function buildRenderOptions(input, flags) {
         quality: flags.quality,
         ...source,
         ...(flags.baseUrl !== undefined ? { baseUrl: flags.baseUrl } : {}),
+        ...(flags.colorSpace !== undefined ? { colorSpace: flags.colorSpace } : {}),
         ...(animation ? { animation } : {}),
     };
 }

package/dist/cli.js

@@ -12,6 +12,7 @@ const OUTPUT_FORMATS = [
     "webp",
     "apng",
     "gif",
+    "tiff",
     "avif",
     "jxl",
     "raw",
@@ -32,6 +33,7 @@ program
     .option("-f, --format <format>", `output format (${OUTPUT_FORMATS.join(", ")})`, "png")
     .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())
     .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))
@@ -42,6 +44,12 @@ program
             console.error(`Error: unsupported format "${options.format}". Choose from: ${OUTPUT_FORMATS.join(", ")}`);
             process.exit(1);
         }
+        if (options.colorSpace !== undefined &&
+            options.colorSpace !== "srgb" &&
+            options.colorSpace !== "cmyk") {
+            console.error(`Error: unsupported color space "${options.colorSpace}". Choose from: srgb, cmyk`);
+            process.exit(1);
+        }
         const isUrl = isUrlInput(input);
         let outputPath = options.output;
         if (!outputPath) {
@@ -61,6 +69,7 @@ program
             format,
             quality: options.quality,
             baseUrl: options.baseUrl,
+            colorSpace: options.colorSpace,
             animation: options.animation,
             animationFps: options.animationFps,
             animationLoop: options.animationLoop,

package/dist/core-orchestrate.d.ts

@@ -5,7 +5,7 @@ import type { HtmlToImageOptions, OutputFormat, RenderResult } from "./core.js";
 declare const DEFAULT_USER_AGENT = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36";
 export { DEFAULT_USER_AGENT };
 /** Binding names reported by {@link requireBindingError}. */
-export type WasmBindingName = "satoru_render" | "converter_encode" | "converter_encode_svg" | "converter_encode_pdf" | "converter_load_image" | "html_to_image";
+export type WasmBindingName = "satoru_render" | "converter_encode" | "converter_encode_svg" | "converter_encode_pdf" | "converter_encode_pdf_cmyk" | "converter_load_image" | "html_to_image";
 export declare function requireBindingError(name: WasmBindingName): Error;
 /** Mutable orchestration state for one `htmlToImage` call. */
 export interface Orchestration {
@@ -61,6 +61,8 @@ export interface Orchestration {
     pdfHeader: string | undefined;
     pdfFooter: string | undefined;
     fmtInt: number;
+    /** Output color space of `tiff` / `pdf`. */
+    colorSpace: "srgb" | "cmyk";
     mediaTypeInt: number;
     t0: number;
     diag: DiagState | null;

package/dist/core-orchestrate.js

@@ -11,7 +11,7 @@
  * satoru option objects come from `./encode-args.ts` (canonical builder).
  */
 import { pdfFirstPageSize, svgRootHeight } from "./output-size.js";
-import { FIT_INT, FORMAT_INT } from "./encode-args.js";
+import { FIT_INT, FORMAT_INT, TIFF_CMYK_INT } from "./encode-args.js";
 import { imageBytesFromUnknown, toBytes, } from "./input.js";
 import { DIAGNOSTIC_CODES, LogLevel, } from "./diagnostics.js";
 import { isNodeRuntime, now, resolveHtmlResources, } from "./core-resources.js";
@@ -46,7 +46,10 @@ export function createOrchestration(module, options) {
     // Loop count of the produced animated WebP (0 = infinite = legacy default).
     const animationLoop = Math.max(0, Math.trunc(animationFrames?.loop ?? 0));
     const speed = speedOption ?? defaultSpeed(format);
-    const fmtInt = FORMAT_INT[format];
+    const colorSpace = options.colorSpace === "cmyk" ? "cmyk" : "srgb";
+    const fmtInt = format === "tiff" && colorSpace === "cmyk"
+        ? TIFF_CMYK_INT
+        : FORMAT_INT[format];
     const mediaTypeInt = mediaType === "print" ? 1 : 0;
     /** JS-side log hook, gated by `logLevel` (satoru parity). */
     const emitLog = (level, message) => {
@@ -170,6 +173,7 @@ export function createOrchestration(module, options) {
         pdfHeader,
         pdfFooter,
         fmtInt,
+        colorSpace,
         mediaTypeInt,
         t0,
         diag,
@@ -244,7 +248,7 @@ export async function resolveHtmlSource(orch) {
  * `imageBytesFromUnknown` (`unknown` in, no `as` casts).
  */
 export async function runImageInput(module, value, orch) {
-    const { format, quality, speed, animation, animationLoop, width, height, crop, fit, fmtInt, t0, emitLog, logged, loggedBinding, addTime, deliverReport, } = orch;
+    const { format, quality, speed, animation, animationLoop, width, height, crop, fit, fmtInt, colorSpace, t0, emitLog, logged, loggedBinding, addTime, deliverReport, } = orch;
     // Narrowed here: caller selected this branch via `isImageInput(value)`.
     const loadImage = module.converter_load_image;
     if (typeof loadImage !== "function")
@@ -311,9 +315,10 @@ export async function runImageInput(module, value, orch) {
             };
         }
         if (format === "pdf") {
-            const pdfBinding = module.converter_encode_pdf;
+            const pdfBindingName = colorSpace === "cmyk" ? "converter_encode_pdf_cmyk" : "converter_encode_pdf";
+            const pdfBinding = module[pdfBindingName];
             if (typeof pdfBinding !== "function")
-                throw loggedBinding("converter_encode_pdf");
+                throw loggedBinding(pdfBindingName);
             const encodeStart = now();
             const out = (await pdfBinding(inst));
             addTime("encode", now() - encodeStart);

package/dist/core-resources.d.ts

@@ -69,6 +69,14 @@ export declare function limitCodeForReason(reason: string): string;
  * together, so this bounds the connection burst for many-page documents.
  */
 export declare const FETCH_CONCURRENCY = 16;
+/**
+ * Resolve the relative `url(...)` and `@import` references of a fetched stylesheet against
+ * the stylesheet's own URL. The engine resolves them against the page, which is wrong as soon
+ * as the sheet lives in another directory (`url(../fonts/a.woff)` in `/static/css/a.css`).
+ * Absolute, protocol-relative, `data:`, `#` and root-relative references are left alone, and a
+ * root-relative sheet URL keeps its root-relative form.
+ */
+export declare function absolutizeCssUrls(css: string, cssUrl: string): string;
 /** Run `fn` over `items` with at most `limit` calls in flight (`fn` must not reject). */
 export declare function mapWithLimit<T>(items: readonly T[], limit: number, fn: (item: T) => Promise<void>): Promise<void>;
 /**

package/dist/core-resources.js

@@ -270,6 +270,50 @@ export function limitCodeForReason(reason) {
  * together, so this bounds the connection burst for many-page documents.
  */
 export const FETCH_CONCURRENCY = 16;
+/**
+ * Resolve the relative `url(...)` and `@import` references of a fetched stylesheet against
+ * the stylesheet's own URL. The engine resolves them against the page, which is wrong as soon
+ * as the sheet lives in another directory (`url(../fonts/a.woff)` in `/static/css/a.css`).
+ * Absolute, protocol-relative, `data:`, `#` and root-relative references are left alone, and a
+ * root-relative sheet URL keeps its root-relative form.
+ */
+export function absolutizeCssUrls(css, cssUrl) {
+    if (!css.includes("url(") && !css.includes("@import"))
+        return css;
+    const dummy = "http://css-base.invalid/";
+    let base;
+    try {
+        base = new URL(cssUrl, dummy);
+    }
+    catch {
+        return css;
+    }
+    const keepRootRelative = cssUrl.startsWith("/");
+    const absoluteCssUrl = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(cssUrl);
+    const resolve = (ref) => {
+        const t = ref.trim();
+        if (t === "" ||
+            t.startsWith("#") ||
+            t.startsWith("/") ||
+            /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(t))
+            return ref;
+        try {
+            const u = new URL(t, base);
+            if (absoluteCssUrl)
+                return u.href;
+            if (u.origin !== base.origin)
+                return u.href;
+            const path = u.pathname + u.search + u.hash;
+            return keepRootRelative ? path : path.slice(1);
+        }
+        catch {
+            return ref;
+        }
+    };
+    return css
+        .replace(/url\(\s*(['"]?)([^'")]*)\1\s*\)/g, (_m, q, ref) => `url(${q}${resolve(ref)}${q})`)
+        .replace(/@import\s+(['"])([^'"]+)\1/g, (_m, q, ref) => `@import ${q}${resolve(ref)}${q}`);
+}
 /** Run `fn` over `items` with at most `limit` calls in flight (`fn` must not reject). */
 export async function mapWithLimit(items, limit, fn) {
     let next = 0;
@@ -392,6 +436,10 @@ export async function resolveHtmlResources(module, satoruInst, htmls, width, hei
         const pending = parsePendingResources(bin instanceof Uint8Array ? bin : undefined);
         if (pending.length === 0)
             break;
+        // Stylesheets cascade by document order, not by fetch completion order: a small
+        // later sheet must not land before (and so lose to) a large earlier one. They are
+        // buffered here and injected in discovery order once the whole round has settled.
+        const loadedCss = [];
         await mapWithLimit(pending, FETCH_CONCURRENCY, async (r) => {
             const diag = ctx.diag;
             const entry = diag
@@ -470,7 +518,11 @@ export async function resolveHtmlResources(module, satoruInst, htmls, width, hei
                 }
                 ctx.usage.totalResourceBytes += bytes.length;
                 settle("loaded", bytes.length);
-                (await addRes(satoruInst, r.url, r.type === "image" ? 2 : r.type === "css" ? 3 : 1, bytes));
+                if (r.type === "css") {
+                    loadedCss.push({ index: pending.indexOf(r), url: r.url, bytes });
+                    return;
+                }
+                (await addRes(satoruInst, r.url, r.type === "image" ? 2 : 1, bytes));
                 if (r.type === "font") {
                     diag?.fonts.push({
                         family: r.name || r.url,
@@ -486,6 +538,13 @@ export async function resolveHtmlResources(module, satoruInst, htmls, width, hei
                 diag?.warnings.push(d);
             }
         });
+        loadedCss.sort((a, b) => a.index - b.index);
+        for (const css of loadedCss) {
+            const text = new TextDecoder().decode(css.bytes);
+            const fixed = absolutizeCssUrls(text, css.url);
+            const bytes = fixed === text ? css.bytes : new TextEncoder().encode(fixed);
+            (await addRes(satoruInst, css.url, 3, bytes));
+        }
     }
     // Merge the C++ collect-phase breakdown into the JS timings.
     if (profileEnabled && ctx.diag) {

package/dist/core.d.ts

@@ -16,7 +16,7 @@ export type { WasmBindingName } from "./core-orchestrate.js";
  *   (`converter_load_image` -> optional crop/resize -> `converter_encode`,
  *   or `converter_encode_svg` / `converter_encode_pdf`).
  */
-export type OutputFormat = "svg" | "png" | "pdf" | "jpeg" | "webp" | "apng" | "gif" | "avif" | "jxl" | "raw" | "thumbhash" | "none";
+export type OutputFormat = "svg" | "png" | "pdf" | "jpeg" | "webp" | "apng" | "gif" | "tiff" | "avif" | "jxl" | "raw" | "thumbhash" | "none";
 /** Result of rendering an HTML document or converting an image. */
 export interface RenderResult<T = Uint8Array | string> {
     /** Output binary or text (string for svg, Uint8Array for all others). */
@@ -146,6 +146,17 @@ export interface HtmlToImageOptions extends RenderOptions {
     }[];
     /** Safety/performance limits, enforced in JS around resource resolution. */
     limits?: RenderLimits;
+    /**
+     * Output color space of `tiff` and `pdf` (default `"srgb"`).
+     *
+     * - `"srgb"`: RGB (TIFF keeps the alpha channel).
+     * - `"cmyk"`: CMYK for print. TIFF is written as a separated image with transparency
+     *   flattened onto white; PDF has every fill / stroke color and image rewritten to
+     *   DeviceCMYK. The conversion is the plain device formula (K = 1 - max(R, G, B), pure
+     *   black stays K only); it applies no ICC profile, so saturated screen colors are not
+     *   gamut-mapped. Other formats ignore it.
+     */
+    colorSpace?: "srgb" | "cmyk";
     /** PDF Title metadata. */
     pdfTitle?: string;
     /** PDF Author metadata. */

package/dist/core.js

@@ -46,6 +46,7 @@ export async function htmlToImage(module, options) {
         fit: orch.fit,
         textToPaths: orch.textToPaths,
         mediaTypeInt: orch.mediaTypeInt,
+        colorSpace: orch.colorSpace,
         pdfTitle: orch.pdfTitle,
         pdfAuthor: orch.pdfAuthor,
         pdfSubject: orch.pdfSubject,

package/dist/encode-args.d.ts

@@ -5,6 +5,8 @@
 import type { HtmlToImageOptions, OutputFormat } from "./core.js";
 /** `RenderFormat` enum values (mirrors `bridge_types.h`). */
 export declare const FORMAT_INT: Record<OutputFormat, number>;
+/** `RenderFormat::TIFFCmyk`: the CMYK variant of `tiff` (the color space rides in the format int). */
+export declare const TIFF_CMYK_INT = 12;
 export declare const FIT_INT: Record<NonNullable<HtmlToImageOptions["fit"]>, number>;
 /** Map `crop`/`fit` to satoru render-option fields (`parse_satoru_options`). */
 export declare function buildSatoruOptions(crop: HtmlToImageOptions["crop"], fit: HtmlToImageOptions["fit"]): Record<string, unknown>;
@@ -14,6 +16,7 @@ export interface FullSatoruOptionsInput {
     fit: HtmlToImageOptions["fit"];
     textToPaths?: boolean;
     mediaTypeInt: number;
+    colorSpace?: "srgb" | "cmyk";
     pdfTitle?: string;
     pdfAuthor?: string;
     pdfSubject?: string;

package/dist/encode-args.js

@@ -9,10 +9,13 @@ export const FORMAT_INT = {
     jxl: 8,
     apng: 9,
     gif: 10,
+    tiff: 11,
     raw: 6,
     thumbhash: 7,
     none: -1,
 };
+/** `RenderFormat::TIFFCmyk`: the CMYK variant of `tiff` (the color space rides in the format int). */
+export const TIFF_CMYK_INT = 12;
 export const FIT_INT = {
     contain: 0,
     cover: 1,
@@ -41,6 +44,7 @@ export function buildFullSatoruOptions(input) {
         ...buildSatoruOptions(input.crop, input.fit),
         svgTextToPaths: textToPaths ?? true,
         mediaType: mediaTypeInt,
+        ...(input.colorSpace === "cmyk" ? { colorSpace: 1 } : {}),
         pdfTitle: pdfTitle ?? "",
         pdfAuthor: pdfAuthor ?? "",
         pdfSubject: pdfSubject ?? "",