wasm-html-to-image 1.0.1 → 1.0.2

package/README.md

@@ -267,6 +267,10 @@ npx wasm-html-to-image template.html -o banner.webp -w 1200 -h 630 -f webp -q 90
 # Capture screenshot from URL
 npx wasm-html-to-image https://example.com -o site.png -w 1280 -h 720
 
+# Pin the base for relative resources (default: URL input follows redirects,
+# file input uses the file's own directory)
+npx wasm-html-to-image https://example.com/news -o news.png --base-url https://example.com/
+
 # Convert and resize an image
 npx wasm-html-to-image photo.jpg -o photo.avif -w 800 -f avif -q 80
 ```

package/dist/cli-options.d.ts

@@ -0,0 +1,32 @@
+import type { HtmlToImageOptions, OutputFormat } from "./core.js";
+/** Flags as parsed by commander (see `./cli.ts`). */
+export interface CliFlags {
+    output?: string;
+    width: number;
+    height?: number;
+    format: OutputFormat;
+    quality: number;
+    /** Explicit `--base-url`; absent means "let the source decide". */
+    baseUrl?: string;
+}
+/**
+ * URL inputs are fetched, not read from disk. `data:` URLs stay values so
+ * image inputs keep flowing through the converter pipeline.
+ */
+export declare function isUrlInput(input: string): boolean;
+/**
+ * Read a local input file as binary; image files (magic-byte sniffed) are
+ * passed through as bytes, everything else as UTF-8 text (HTML).
+ */
+export declare function readInput(input: string): Promise<{
+    value: string | Uint8Array;
+    baseUrl: string;
+}>;
+/**
+ * Map CLI flags to `render()` options.
+ *
+ * `--base-url` is the only way to pin the base: without it a URL input leaves
+ * `baseUrl` unset so relative resources follow the post-redirect final URL
+ * (`resolveHtmlSource`), while a file input falls back to its own directory.
+ */
+export declare function buildRenderOptions(input: string, flags: CliFlags): Promise<HtmlToImageOptions>;

package/dist/cli-options.js

@@ -0,0 +1,55 @@
+/**
+ * CLI flag plumbing split from `./cli.ts` (behavior unchanged): input-type
+ * detection, local file reading, and the flag -> `render()` option mapping.
+ * Kept separate from the executable entry point so the mapping is
+ * unit-testable without running the CLI.
+ */
+import fs from "node:fs/promises";
+import path from "node:path";
+import { isImageInput } from "./input.js";
+/**
+ * URL inputs are fetched, not read from disk. `data:` URLs stay values so
+ * image inputs keep flowing through the converter pipeline.
+ */
+export function isUrlInput(input) {
+    const isWindowsPath = /^[a-zA-Z]:[\\/]/.test(input);
+    return (!isWindowsPath &&
+        /^[a-z][a-z0-9+.-]*:/i.test(input) &&
+        !input.startsWith("data:"));
+}
+/**
+ * Read a local input file as binary; image files (magic-byte sniffed) are
+ * passed through as bytes, everything else as UTF-8 text (HTML).
+ */
+export async function readInput(input) {
+    const data = await fs.readFile(input);
+    let value = data.toString("utf-8");
+    try {
+        if (isImageInput(data))
+            value = data;
+    }
+    catch {
+        // Unknown binary magic -> treat as text and let rendering decide.
+    }
+    return { value, baseUrl: path.dirname(path.resolve(input)) };
+}
+/**
+ * Map CLI flags to `render()` options.
+ *
+ * `--base-url` is the only way to pin the base: without it a URL input leaves
+ * `baseUrl` unset so relative resources follow the post-redirect final URL
+ * (`resolveHtmlSource`), while a file input falls back to its own directory.
+ */
+export async function buildRenderOptions(input, flags) {
+    const source = isUrlInput(input)
+        ? { url: input }
+        : await readInput(input);
+    return {
+        width: flags.width,
+        height: flags.height,
+        format: flags.format,
+        quality: flags.quality,
+        ...source,
+        ...(flags.baseUrl !== undefined ? { baseUrl: flags.baseUrl } : {}),
+    };
+}

package/dist/cli.js

@@ -2,8 +2,8 @@
 import { program } from "commander";
 import fs from "node:fs/promises";
 import path from "node:path";
-import { render, } from "./single.js";
-import { isImageInput } from "./core.js";
+import { render } from "./single.js";
+import { buildRenderOptions, isUrlInput } from "./cli-options.js";
 const OUTPUT_FORMATS = [
     "svg",
     "png",
@@ -19,22 +19,6 @@ const OUTPUT_FORMATS = [
 function isOutputFormat(value) {
     return OUTPUT_FORMATS.includes(value);
 }
-/**
- * Read a local input file as binary; image files (magic-byte sniffed) are
- * passed through as bytes, everything else as UTF-8 text (HTML).
- */
-async function readInput(input) {
-    const data = await fs.readFile(input);
-    let value = data.toString("utf-8");
-    try {
-        if (isImageInput(data))
-            value = data;
-    }
-    catch {
-        // Unknown binary magic -> treat as text and let rendering decide.
-    }
-    return { value, baseUrl: path.dirname(path.resolve(input)) };
-}
 program
     .name("wasm-html-to-image")
     .description("HTML to image converter on the single unified WASM module (svg/pdf direct, png/jpeg/webp/avif/jxl/raw/thumbhash via encode or html_to_image)")
@@ -45,6 +29,7 @@ program
     .option("-h, --height <number>", "viewport height (omit for auto)", (v) => parseInt(v, 10))
     .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)")
     .action(async (input, options) => {
     try {
         const format = String(options.format).toLowerCase();
@@ -52,10 +37,7 @@ program
             console.error(`Error: unsupported format "${options.format}". Choose from: ${OUTPUT_FORMATS.join(", ")}`);
             process.exit(1);
         }
-        const isWindowsPath = /^[a-zA-Z]:[\\/]/.test(input);
-        const isUrl = !isWindowsPath &&
-            /^[a-z][a-z0-9+.-]*:/i.test(input) &&
-            !input.startsWith("data:");
+        const isUrl = isUrlInput(input);
         let outputPath = options.output;
         if (!outputPath) {
             const ext = format;
@@ -67,14 +49,15 @@ program
                     ext: `.${ext}`,
                 });
         }
-        const renderOptions = {
+        const flags = {
+            output: options.output,
             width: options.width,
             height: options.height,
             format,
             quality: options.quality,
-            ...(isUrl ? { url: input, baseUrl: input } : await readInput(input)),
+            baseUrl: options.baseUrl,
         };
-        const result = await render(renderOptions);
+        const result = await render(await buildRenderOptions(input, flags));
         await fs.writeFile(outputPath, typeof result.data === "string"
             ? result.data
             : Buffer.from(result.data));

package/dist/core-orchestrate.js

@@ -183,12 +183,18 @@ export async function resolveHtmlSource(orch) {
     if (typeof url === "string") {
         const headers = { "User-Agent": userAgent ?? DEFAULT_USER_AGENT };
         const fetchStart = now();
+        // Post-redirect document URL (`Response.url`). Relative resources must
+        // resolve against the final URL, not the stale request URL: a 301 to a new
+        // host otherwise leaves every stylesheet/font/image on the old host.
+        let finalUrl;
         let htmls;
         if (resolveResource) {
             const fallbackFetch = async () => {
                 const res = await fetch(url, { headers });
                 if (!res.ok)
                     return null;
+                if (res.url)
+                    finalUrl = res.url;
                 return toBytes(await res.arrayBuffer());
             };
             const raw = await resolveResource(url, fallbackFetch);
@@ -202,8 +208,15 @@ export async function resolveHtmlSource(orch) {
             if (!res.ok) {
                 throw logged(`wasm-html-to-image: failed to fetch HTML from URL: ${url} (${res.status})`);
             }
+            if (res.url)
+                finalUrl = res.url;
             htmls = await res.text();
         }
+        // An explicit `baseUrl` always wins; otherwise adopt the document URL so
+        // relative resource resolution follows redirects.
+        if (orch.baseUrl === undefined && finalUrl !== undefined) {
+            orch.baseUrl = finalUrl;
+        }
         addTime("fetchHtml", now() - fetchStart);
         return htmls;
     }