wasm-html-to-image 1.0.8 → 1.0.10

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. For print resolution, add `scale` (CLI: `--scale`): an 8.33in-wide page at 300 dpi is `width: 800, scale: 3.125`, and the TIFF records `96 × scale` ppi (override with `dpi`).
 
 Every call returns a `RenderResult` object:
 ```typescript

package/dist/cli-options.d.ts

@@ -8,6 +8,12 @@ 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";
+    /** `--scale <n>`; absent means 1. */
+    scale?: number;
+    /** `--dpi <n>`; absent means 96 x scale. */
+    dpi?: number;
     /** `--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,9 @@ export async function buildRenderOptions(input, flags) {
         quality: flags.quality,
         ...source,
         ...(flags.baseUrl !== undefined ? { baseUrl: flags.baseUrl } : {}),
+        ...(flags.colorSpace !== undefined ? { colorSpace: flags.colorSpace } : {}),
+        ...(flags.scale !== undefined ? { scale: flags.scale } : {}),
+        ...(flags.dpi !== undefined ? { dpi: flags.dpi } : {}),
         ...(animation ? { animation } : {}),
     };
 }

package/dist/cli.js

@@ -12,6 +12,7 @@ const OUTPUT_FORMATS = [
     "webp",
     "apng",
     "gif",
+    "tiff",
     "avif",
     "jxl",
     "raw",
@@ -32,6 +33,9 @@ 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("--scale <n>", "pixel density of raster output from HTML (default 1; 3.125 draws an 800px layout as 2500px)", (v) => parseFloat(v))
+    .option("--dpi <n>", "resolution written to tiff output, in pixels per inch (default 96 x scale)", (v) => parseInt(v, 10))
     .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 +46,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 +71,9 @@ program
             format,
             quality: options.quality,
             baseUrl: options.baseUrl,
+            colorSpace: options.colorSpace,
+            scale: options.scale,
+            dpi: options.dpi,
             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,14 @@ export interface Orchestration {
     pdfHeader: string | undefined;
     pdfFooter: string | undefined;
     fmtInt: number;
+    /** Output color space of `tiff` / `pdf`. */
+    colorSpace: "srgb" | "cmyk";
+    /** Raster pixel density of HTML input (1 = CSS px). */
+    scale: number;
+    /** TIFF resolution tag in pixels per inch (image input: 96 unless set). */
+    dpi: number;
+    /** The caller's explicit `dpi` (image input has no `scale`, so it falls back to 96). */
+    dpiOption: number | undefined;
     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,20 @@ 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 scale = options.scale ?? 1;
+    if (!Number.isFinite(scale) || scale <= 0 || scale > 16) {
+        throw new Error(`wasm-html-to-image: scale must be a number in (0, 16], got ${String(options.scale)}`);
+    }
+    if (options.dpi !== undefined &&
+        (!Number.isFinite(options.dpi) || options.dpi < 1 || options.dpi > 65535)) {
+        throw new Error(`wasm-html-to-image: dpi must be a number in [1, 65535], got ${String(options.dpi)}`);
+    }
+    // One CSS px is 1/96 in, so a scaled HTML render carries 96 * scale ppi by default.
+    const dpi = Math.round(options.dpi ?? 96 * scale);
+    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 +183,10 @@ export function createOrchestration(module, options) {
         pdfHeader,
         pdfFooter,
         fmtInt,
+        colorSpace,
+        scale,
+        dpi,
+        dpiOption: options.dpi,
         mediaTypeInt,
         t0,
         diag,
@@ -244,7 +261,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, dpiOption, 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 +328,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);
@@ -338,6 +356,8 @@ export async function runImageInput(module, value, orch) {
         const encodeBinding = module.converter_encode;
         if (typeof encodeBinding !== "function")
             throw loggedBinding("converter_encode");
+        if (format === "tiff")
+            module.converter_set_dpi?.(inst, Math.round(dpiOption ?? 96));
         const encodeStart = now();
         const out = (await encodeBinding(inst, fmtInt, quality, speed, animation, animationLoop));
         addTime("encode", now() - encodeStart);
@@ -371,7 +391,7 @@ export async function runImageInput(module, value, orch) {
  * pre-resolved resources, so it stays a fallback only).
  */
 export async function tryRunHtmlInstance(module, htmls, satoruOpts, defaultFontMap, orch) {
-    const { format, quality, speed, animation, animationFrames, animationLoop, width, height, baseUrl, fontMap, userAgent, fallbackFonts, fmtInt, t0, emitLog, logged, loggedBinding, addTime, deliverReport, resolveCtx, } = orch;
+    const { format, quality, speed, animation, animationFrames, animationLoop, width, height, baseUrl, fontMap, userAgent, fallbackFonts, fmtInt, dpi, t0, emitLog, logged, loggedBinding, addTime, deliverReport, resolveCtx, } = orch;
     const renderBinding = module.satoru_render;
     const encodeBinding = module.converter_encode;
     if (typeof renderBinding !== "function" ||
@@ -453,6 +473,8 @@ export async function tryRunHtmlInstance(module, htmls, satoruOpts, defaultFontM
             }
             const outWidth = module.converter_get_width?.(cInst) ?? width;
             const outHeight = module.converter_get_height?.(cInst) ?? height ?? 0;
+            if (format === "tiff")
+                module.converter_set_dpi?.(cInst, dpi);
             const encodeStart = now();
             const out = (await encodeBinding(cInst, fmtInt, quality, speed, animation, animationLoop));
             addTime("encode", now() - encodeStart);

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,30 @@ export interface HtmlToImageOptions extends RenderOptions {
     }[];
     /** Safety/performance limits, enforced in JS around resource resolution. */
     limits?: RenderLimits;
+    /**
+     * Pixel density of raster output from HTML input (default `1`). The page is laid out at
+     * `width` CSS px and drawn `scale` times larger, so `scale: 3.125` turns an 800px layout
+     * into a 2500px bitmap (300 dpi for an 8.33in page) with text and shapes re-rasterized
+     * sharply. `width` / `height` / `crop` stay in CSS px; the result's `width` / `height` are
+     * the bitmap size. Range 0-16; ignored for `svg` / `pdf` and for image input.
+     */
+    scale?: number;
+    /**
+     * Resolution written to the `tiff` file, in pixels per inch (default `96 * scale`, rounded:
+     * one CSS px is 1/96 in). A print shop reads the physical size from it.
+     */
+    dpi?: number;
+    /**
+     * 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,8 @@ export async function htmlToImage(module, options) {
         fit: orch.fit,
         textToPaths: orch.textToPaths,
         mediaTypeInt: orch.mediaTypeInt,
+        colorSpace: orch.colorSpace,
+        scale: orch.scale,
         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,8 @@ export interface FullSatoruOptionsInput {
     fit: HtmlToImageOptions["fit"];
     textToPaths?: boolean;
     mediaTypeInt: number;
+    colorSpace?: "srgb" | "cmyk";
+    scale?: number;
     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,8 @@ export function buildFullSatoruOptions(input) {
         ...buildSatoruOptions(input.crop, input.fit),
         svgTextToPaths: textToPaths ?? true,
         mediaType: mediaTypeInt,
+        ...(input.colorSpace === "cmyk" ? { colorSpace: 1 } : {}),
+        ...(input.scale !== undefined && input.scale !== 1 ? { scale: input.scale } : {}),
         pdfTitle: pdfTitle ?? "",
         pdfAuthor: pdfAuthor ?? "",
         pdfSubject: pdfSubject ?? "",