satoru-render 0.0.19 → 0.0.21

package/README.md

@@ -103,9 +103,9 @@ const png = await render({
 
 ## 🛠️ Advanced Usage
 
-### 1. Dynamic Resource Resolution
+### 1. Dynamic Resource Resolution & Caching
 
-Satoru can automatically fetch missing fonts, images, or external CSS via a `resolveResource` callback.
+Satoru can automatically fetch missing fonts, images, or external CSS via a `resolveResource` callback. You can also implement high-performance caching using the browser's `CacheStorage` API.
 
 ```typescript
 const pdf = await render({
@@ -114,17 +114,58 @@ const pdf = await render({
   format: "pdf",
   baseUrl: "https://example.com/assets/",
   resolveResource: async (resource, defaultResolver) => {
-    // Custom intercept logic
-    if (resource.url.startsWith("my-app://")) {
-      return myAssetBuffer;
+    // 1. Open Cache storage
+    const cache = await caches.open("satoru-resource-cache");
+    const cachedResponse = await cache.match(resource.url);
+
+    // 2. Return cached data if available
+    if (cachedResponse) {
+      const buf = await cachedResponse.arrayBuffer();
+      return new Uint8Array(buf);
     }
-    // Fallback to default fetch/filesystem resolver
+
+    // 3. Fetch using default resolver and save to cache
+    const data = await defaultResolver(resource);
+    if (data?.length) {
+      await cache.put(resource.url, new Response(data));
+    }
+
+    return data;
+  },
+});
+```
+
+### 2. Avoiding CORS Issues with Proxy
+
+If you encounter CORS errors when fetching images or fonts from other domains, you can use a proxy service within the `resolveResource` callback.
+
+```typescript
+const png = await render({
+  value: html,
+  width: 800,
+  format: "png",
+  resolveResource: async (resource, defaultResolver) => {
+    // Intercept external images to avoid CORS issues
+    if (resource.type === "image" && !resource.url.startsWith("data:")) {
+      const proxyUrl = `https://your-proxy-service.com/?url=${encodeURIComponent(resource.url)}`;
+      try {
+        const resp = await fetch(proxyUrl);
+        if (resp.ok) {
+          const buf = await resp.arrayBuffer();
+          return new Uint8Array(buf);
+        }
+      } catch (e) {
+        console.warn(`Failed to fetch via proxy: ${resource.url}`, e);
+      }
+    }
+    
+    // Fallback to default resolver for other resources
     return defaultResolver(resource);
   },
 });
 ```
 
-### 2. Multi-page PDF Generation
+### 3. Multi-page PDF Generation
 
 Generate complex documents by passing an array of HTML strings. Each element in the array becomes a new page.
 
@@ -254,6 +295,31 @@ const pngBytes = await render({
 });
 ```
 
+### 7. DOM Capture (html2canvas alternative)
+
+Satoru can capture live DOM elements directly in the browser, preserving computed styles, pseudo-elements (`::before`/`::after`), canvas contents, and form states.
+
+```typescript
+import { Satoru } from "satoru-render";
+import createSatoruModule from "satoru-render/satoru.js";
+
+const satoru = await Satoru.create(createSatoruModule);
+const element = document.getElementById("target-element");
+
+// 1. Capture to HTMLCanvasElement (Direct html2canvas replacement)
+const canvas = await satoru.capture(element, {
+  format: "png",
+});
+document.body.appendChild(canvas);
+
+// 2. Or render directly to binary (Uint8Array)
+const png = await satoru.render({
+  value: element, // Accepts HTMLElement directly
+  width: 800,
+  format: "png",
+});
+```
+
 ---
 
 ## 💻 CLI Tool
@@ -280,9 +346,9 @@ npx satoru-render input.html -f webp --verbose
 
 ### Render Options
 
-| Option            | Type                                | Description                                             |
-| :---------------- | :---------------------------------- | :------------------------------------------------------ |
-| `value`           | `string \| string[]`                | HTML string or array of strings (for multi-page PDF).   |
+| Option            | Type                                     | Description                                             |
+| :---------------- | :--------------------------------------- | :------------------------------------------------------ |
+| `value`           | `string \| string[] \| HTMLElement \| ...` | HTML string, array of strings, or DOM element(s).       |
 | `url`             | `string`                            | URL to fetch HTML from.                                 |
 | `width`           | `number`                            | **Required.** Output width in pixels.                   |
 | `height`          | `number`                            | Output height. Default: `0` (auto-calculate).           |

package/dist/core.d.ts

@@ -28,7 +28,7 @@ export interface RequiredResource {
 }
 export type ResourceResolver = (resource: RequiredResource, defaultResolver: (resource: RequiredResource) => Promise<Uint8Array | null>) => Promise<Uint8Array | ArrayBufferView | null>;
 export interface RenderOptions {
-    value?: string | string[];
+    value?: string | string[] | any | any[];
     url?: string;
     width: number;
     height?: number;
@@ -82,4 +82,9 @@ export declare abstract class SatoruBase {
         format?: "svg";
     }): Promise<string>;
     render(options: RenderOptions): Promise<string | Uint8Array>;
+    /**
+     * Combines multiple simple PDF files into one.
+     * This is a minimal implementation specialized for Skia-generated PDFs.
+     */
+    private mergeSimplePDFs;
 }

package/dist/core.js

@@ -1,10 +1,10 @@
 import { LogLevel } from "./log-level.js";
 export const DEFAULT_FONT_MAP = {
-    "sans-serif": "https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-jp/files/noto-sans-jp-japanese-400-normal.woff2",
-    serif: "https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-jp/files/noto-serif-jp-japanese-400-normal.woff2",
-    monospace: "https://cdn.jsdelivr.net/npm/@fontsource/m-plus-1-code/files/m-plus-1-code-japanese-400-normal.woff2",
-    cursive: "https://cdn.jsdelivr.net/npm/@fontsource/yuji-syuku/files/yuji-syuku-japanese-400-normal.woff2",
-    fantasy: "https://cdn.jsdelivr.net/npm/@fontsource/reggae-one/files/reggae-one-japanese-400-normal.woff2",
+    "sans-serif": "https://fonts.googleapis.com/css2?family=Noto+Sans+JP",
+    serif: "https://fonts.googleapis.com/css2?family=Noto+Serif+JP",
+    monospace: "https://fonts.googleapis.com/css2?family=M+PLUS+1+Code",
+    cursive: "https://fonts.googleapis.com/css2?family=Yuji+Syuku",
+    fantasy: "https://fonts.googleapis.com/css2?family=Reggae+One",
     emoji: "https://cdn.jsdelivr.net/npm/@fontsource/noto-color-emoji/files/noto-color-emoji-emoji-400-normal.woff2",
     "Noto Color Emoji": "https://cdn.jsdelivr.net/npm/@fontsource/noto-color-emoji/files/noto-color-emoji-emoji-400-normal.woff2",
 };
@@ -161,8 +161,23 @@ export class SatoruBase {
         }
     }
     async render(options) {
+        let { format = "svg", value, url, baseUrl } = options;
+        if (format === "pdf" && Array.isArray(value) && value.length > 1) {
+            const pagePdfs = [];
+            const SatoruClass = this.constructor;
+            for (const html of value) {
+                const engine = await SatoruClass.create();
+                const pagePdf = await engine.render({
+                    ...options,
+                    value: html,
+                    format: "pdf",
+                });
+                pagePdfs.push(pagePdf);
+            }
+            return this.mergeSimplePDFs(pagePdfs);
+        }
         const mod = await this.getModule();
-        let { value, url, width, height = 0, format = "svg", fonts, images, css, baseUrl, logLevel, onLog, } = options;
+        const { width, height = 0, fonts, images, css, logLevel, onLog, } = options;
         if (!options.userAgent) {
             options.userAgent =
                 "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36";
@@ -240,7 +255,9 @@ export class SatoruBase {
                                 const uint8 = data instanceof Uint8Array
                                     ? data
                                     : new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
-                                if (r.type === "image" && typeof createImageBitmap !== "undefined" && typeof OffscreenCanvas !== "undefined") {
+                                if (r.type === "image" &&
+                                    typeof createImageBitmap !== "undefined" &&
+                                    typeof OffscreenCanvas !== "undefined") {
                                     try {
                                         const blob = new Blob([uint8.buffer]);
                                         const bitmap = await createImageBitmap(blob);
@@ -308,4 +325,97 @@ export class SatoruBase {
             this.currentFontMap = prevFontMap;
         }
     }
+    /**
+     * Combines multiple simple PDF files into one.
+     * This is a minimal implementation specialized for Skia-generated PDFs.
+     */
+    mergeSimplePDFs(pdfs) {
+        if (pdfs.length === 0)
+            return new Uint8Array();
+        if (pdfs.length === 1)
+            return pdfs[0];
+        const decoder = new TextDecoder();
+        const encoder = new TextEncoder();
+        let maxObjNum = 0;
+        const allObjects = [];
+        const pageIds = [];
+        for (const pdf of pdfs) {
+            const offset = maxObjNum;
+            const content = decoder.decode(pdf);
+            // Find all objects
+            const objRegex = /(\d+)\s+0\s+obj([\s\S]*?)endobj/g;
+            let match;
+            let currentPdfMax = 0;
+            while ((match = objRegex.exec(content)) !== null) {
+                const oldId = parseInt(match[1], 10);
+                const objBody = match[2];
+                const newId = oldId + offset;
+                if (oldId > currentPdfMax)
+                    currentPdfMax = oldId;
+                // Shift references within the object body: "N 0 R" -> "(N+offset) 0 R"
+                const shiftedBody = objBody.replace(/(\d+)\s+0\s+R/g, (_, id) => {
+                    return `${parseInt(id, 10) + offset} 0 R`;
+                });
+                // Detect if this is a Page object
+                if (shiftedBody.includes("/Type /Page") &&
+                    !shiftedBody.includes("/Type /Pages")) {
+                    pageIds.push(newId);
+                }
+                // We skip Catalog and original Pages root, we'll create new ones
+                if (!shiftedBody.includes("/Type /Catalog") &&
+                    !shiftedBody.includes("/Type /Pages")) {
+                    allObjects.push({
+                        id: newId,
+                        content: encoder.encode(`${newId} 0 obj${shiftedBody}endobj\n`),
+                    });
+                }
+            }
+            maxObjNum += currentPdfMax;
+        }
+        // Create new Catalog and Pages root
+        const catalogId = ++maxObjNum;
+        const pagesRootId = ++maxObjNum;
+        const newPagesRoot = encoder.encode(`${pagesRootId} 0 obj\n<< /Type /Pages /Kids [${pageIds
+            .map((id) => `${id} 0 R`)
+            .join(" ")}] /Count ${pageIds.length} >>\nendobj\n`);
+        const newCatalog = encoder.encode(`${catalogId} 0 obj\n<< /Type /Catalog /Pages ${pagesRootId} 0 R >>\nendobj\n`);
+        allObjects.push({ id: pagesRootId, content: newPagesRoot });
+        allObjects.push({ id: catalogId, content: newCatalog });
+        // Build the final PDF
+        const resultParts = [encoder.encode("%PDF-1.4\n")];
+        const xref = [];
+        let currentOffset = resultParts[0].length;
+        // Sort objects by ID for a clean xref table
+        allObjects.sort((a, b) => a.id - b.id);
+        for (const obj of allObjects) {
+            xref.push({ id: obj.id, offset: currentOffset });
+            resultParts.push(obj.content);
+            currentOffset += obj.content.length;
+        }
+        const startXref = currentOffset;
+        resultParts.push(encoder.encode("xref\n"));
+        resultParts.push(encoder.encode(`0 ${maxObjNum + 1}\n`));
+        resultParts.push(encoder.encode("0000000000 65535 f \n"));
+        const xrefMap = new Map(xref.map((x) => [x.id, x.offset]));
+        for (let i = 1; i <= maxObjNum; i++) {
+            const offset = xrefMap.get(i);
+            if (offset !== undefined) {
+                resultParts.push(encoder.encode(`${offset.toString().padStart(10, "0")} 00000 n \n`));
+            }
+            else {
+                resultParts.push(encoder.encode("0000000000 00001 f \n"));
+            }
+        }
+        resultParts.push(encoder.encode(`trailer\n<< /Size ${maxObjNum + 1} /Root ${catalogId} 0 R >>\n`));
+        resultParts.push(encoder.encode(`startxref\n${startXref}\n%%EOF`));
+        // Combine all parts
+        const totalLength = resultParts.reduce((acc, part) => acc + part.length, 0);
+        const merged = new Uint8Array(totalLength);
+        let pos = 0;
+        for (const part of resultParts) {
+            merged.set(part, pos);
+            pos += part.length;
+        }
+        return merged;
+    }
 }

package/dist/index.d.ts

@@ -1,9 +1,26 @@
-import { SatoruBase, RequiredResource } from "./core.js";
+import { SatoruBase, RequiredResource, RenderOptions } from "./core.js";
 export * from "./core.js";
 export * from "./log-level.js";
 export type { SatoruWorker } from "./child-workers.js";
 export declare class Satoru extends SatoruBase {
     static create(createSatoruModuleFunc: any): Promise<Satoru>;
+    /**
+     * Captures an HTMLElement and returns an HTMLCanvasElement.
+     * Similar to html2canvas.
+     */
+    capture(element: HTMLElement, options?: Partial<Omit<RenderOptions, "value" | "url">>): Promise<HTMLCanvasElement>;
+    private serializeElement;
+    private pngToCanvas;
+    /**
+     * Overrides render to support HTMLElement as value.
+     */
+    render(options: RenderOptions & {
+        format: "png" | "webp" | "pdf";
+    }): Promise<Uint8Array>;
+    render(options: RenderOptions & {
+        format?: "svg";
+    }): Promise<string>;
+    render(options: RenderOptions): Promise<string | Uint8Array>;
     static defaultResourceResolver(resource: RequiredResource, baseUrl?: string, userAgent?: string): Promise<Uint8Array | null>;
     protected resolveDefaultResource(resource: RequiredResource, baseUrl?: string, userAgent?: string): Promise<Uint8Array | null>;
     protected fetchHtml(url: string, userAgent?: string): Promise<string>;

package/dist/index.js

@@ -5,6 +5,169 @@ export class Satoru extends SatoruBase {
     static async create(createSatoruModuleFunc) {
         return new Satoru(createSatoruModuleFunc);
     }
+    /**
+     * Captures an HTMLElement and returns an HTMLCanvasElement.
+     * Similar to html2canvas.
+     */
+    async capture(element, options = {}) {
+        const rect = element.getBoundingClientRect();
+        const width = options.width ?? Math.ceil(rect.width);
+        const height = options.height ?? Math.ceil(rect.height);
+        // 1. Serialize DOM with computed styles
+        const serializedHtml = this.serializeElement(element);
+        // 2. Render to PNG
+        const pngData = await this.render({
+            ...options,
+            value: serializedHtml,
+            width,
+            height,
+            format: "png",
+        });
+        // 3. Convert PNG to Canvas
+        return this.pngToCanvas(pngData, width, height);
+    }
+    serializeElement(element) {
+        const clone = element.cloneNode(true);
+        const absoluteUrl = (url) => {
+            if (!url || url.startsWith("data:") || url.startsWith("blob:"))
+                return url;
+            const a = document.createElement("a");
+            a.href = url;
+            return a.href;
+        };
+        const applyStyles = (src, dest) => {
+            const computed = window.getComputedStyle(src);
+            const styleArr = [];
+            for (let i = 0; i < computed.length; i++) {
+                const prop = computed[i];
+                let value = computed.getPropertyValue(prop);
+                // Convert relative URLs in styles (e.g., background-image)
+                if (value.includes("url(")) {
+                    value = value.replace(/url\(['"]?([^'"]+)['"]?\)/g, (match, url) => {
+                        return `url("${absoluteUrl(url)}")`;
+                    });
+                }
+                styleArr.push(`${prop}:${value}`);
+            }
+            dest.setAttribute("style", styleArr.join(";"));
+            // Handle pseudo-elements
+            const handlePseudo = (pseudoType) => {
+                const style = window.getComputedStyle(src, pseudoType);
+                const content = style.getPropertyValue("content");
+                if (!content || content === "none" || content === "normal")
+                    return;
+                const pseudoEl = document.createElement("span");
+                const pseudoStyles = [];
+                for (let i = 0; i < style.length; i++) {
+                    const prop = style[i];
+                    pseudoStyles.push(`${prop}:${style.getPropertyValue(prop)}`);
+                }
+                pseudoEl.setAttribute("style", pseudoStyles.join(";"));
+                // Remove quotes from content for the innerText if it's just a string
+                if (content.startsWith('"') && content.endsWith('"')) {
+                    pseudoEl.innerText = content.slice(1, -1);
+                }
+                if (pseudoType === "::before") {
+                    dest.prepend(pseudoEl);
+                }
+                else {
+                    dest.append(pseudoEl);
+                }
+            };
+            handlePseudo("::before");
+            handlePseudo("::after");
+            // Special handling for specific elements
+            if (typeof HTMLCanvasElement !== "undefined" && src instanceof HTMLCanvasElement) {
+                const img = document.createElement("img");
+                img.src = src.toDataURL();
+                img.setAttribute("style", dest.getAttribute("style") || "");
+                dest.replaceWith(img);
+            }
+            else if (typeof HTMLImageElement !== "undefined" && src instanceof HTMLImageElement) {
+                dest.setAttribute("src", absoluteUrl(src.src));
+            }
+            else if (typeof HTMLInputElement !== "undefined" && src instanceof HTMLInputElement) {
+                if (src.type === "checkbox" || src.type === "radio") {
+                    if (src.checked)
+                        dest.setAttribute("checked", "");
+                }
+                else {
+                    dest.setAttribute("value", src.value);
+                }
+            }
+            else if (typeof HTMLTextAreaElement !== "undefined" && src instanceof HTMLTextAreaElement) {
+                dest.innerText = src.value;
+            }
+            else if (typeof HTMLSelectElement !== "undefined" && src instanceof HTMLSelectElement) {
+                // Find the selected option and mark it
+                const index = src.selectedIndex;
+                const clonedSelect = dest;
+                if (clonedSelect.options[index]) {
+                    clonedSelect.options[index].setAttribute("selected", "");
+                }
+            }
+            for (let i = 0; i < src.children.length; i++) {
+                const srcChild = src.children[i];
+                const destChild = dest.children[i];
+                if (srcChild && destChild) {
+                    applyStyles(srcChild, destChild);
+                }
+            }
+        };
+        applyStyles(element, clone);
+        return `<!DOCTYPE html><html><body style="margin:0;padding:0;overflow:hidden;background:transparent;">${clone.outerHTML}</body></html>`;
+    }
+    async pngToCanvas(data, width, height) {
+        const blob = new Blob([data], { type: "image/png" });
+        const url = URL.createObjectURL(blob);
+        try {
+            const img = new Image();
+            img.crossOrigin = "anonymous";
+            await new Promise((resolve, reject) => {
+                img.onload = resolve;
+                img.onerror = reject;
+                img.src = url;
+            });
+            const canvas = document.createElement("canvas");
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext("2d");
+            if (ctx) {
+                ctx.drawImage(img, 0, 0);
+            }
+            return canvas;
+        }
+        finally {
+            URL.revokeObjectURL(url);
+        }
+    }
+    async render(options) {
+        if (options.value) {
+            const values = Array.isArray(options.value)
+                ? options.value
+                : [options.value];
+            const processedValues = [];
+            let hasElement = false;
+            for (const val of values) {
+                if (typeof HTMLElement !== "undefined" && val instanceof HTMLElement) {
+                    processedValues.push(this.serializeElement(val));
+                    hasElement = true;
+                }
+                else {
+                    processedValues.push(val);
+                }
+            }
+            if (hasElement) {
+                options = {
+                    ...options,
+                    value: Array.isArray(options.value)
+                        ? processedValues
+                        : processedValues[0],
+                };
+            }
+        }
+        return super.render(options);
+    }
     static async defaultResourceResolver(resource, baseUrl, userAgent) {
         try {
             if (resource.url.startsWith("provider:google-fonts")) {