satoru-render 0.0.19 → 0.0.20

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,12 +114,23 @@ 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
-    return defaultResolver(resource);
+
+    // 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;
   },
 });
 ```
@@ -254,6 +265,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 +316,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;

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 (src instanceof HTMLCanvasElement) {
+                const img = document.createElement("img");
+                img.src = src.toDataURL();
+                img.setAttribute("style", dest.getAttribute("style") || "");
+                dest.replaceWith(img);
+            }
+            else if (src instanceof HTMLImageElement) {
+                dest.setAttribute("src", absoluteUrl(src.src));
+            }
+            else if (src instanceof HTMLInputElement) {
+                if (src.type === "checkbox" || src.type === "radio") {
+                    if (src.checked)
+                        dest.setAttribute("checked", "");
+                }
+                else {
+                    dest.setAttribute("value", src.value);
+                }
+            }
+            else if (src instanceof HTMLTextAreaElement) {
+                dest.innerText = src.value;
+            }
+            else if (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 (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")) {

package/dist/web-workers.js

@@ -404,6 +404,122 @@ var Satoru$1 = class Satoru$1 extends SatoruBase {
 	static async create(createSatoruModuleFunc) {
 		return new Satoru$1(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);
+		const serializedHtml = this.serializeElement(element);
+		const pngData = await this.render({
+			...options,
+			value: serializedHtml,
+			width,
+			height,
+			format: "png"
+		});
+		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);
+				if (value.includes("url(")) value = value.replace(/url\(['"]?([^'"]+)['"]?\)/g, (match, url) => {
+					return `url("${absoluteUrl(url)}")`;
+				});
+				styleArr.push(`${prop}:${value}`);
+			}
+			dest.setAttribute("style", styleArr.join(";"));
+			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(";"));
+				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");
+			if (src instanceof HTMLCanvasElement) {
+				const img = document.createElement("img");
+				img.src = src.toDataURL();
+				img.setAttribute("style", dest.getAttribute("style") || "");
+				dest.replaceWith(img);
+			} else if (src instanceof HTMLImageElement) dest.setAttribute("src", absoluteUrl(src.src));
+			else if (src instanceof HTMLInputElement) if (src.type === "checkbox" || src.type === "radio") {
+				if (src.checked) dest.setAttribute("checked", "");
+			} else dest.setAttribute("value", src.value);
+			else if (src instanceof HTMLTextAreaElement) dest.innerText = src.value;
+			else if (src instanceof HTMLSelectElement) {
+				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 (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")) return resolveGoogleFonts(resource, userAgent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "satoru-render",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "High-fidelity HTML/CSS to SVG/PNG/PDF converter running in WebAssembly",
   "type": "module",
   "main": "./dist/index.js",