satoru-render 1.0.1 → 1.0.3

package/README.md

@@ -350,12 +350,12 @@ npx satoru-render input.html -f webp --verbose
 | :---------------- | :----------------------------------------- | :------------------------------------------------------ |
 | `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).           |
+| `width`           | `number`                                   | **Required.** Canvas width in pixels (used for layout). |
+| `height`          | `number`                                   | Canvas height. Default: `0` (auto-calculate).           |
 | `crop`            | `{ x, y, width, height }`                  | Crop parameters to extract a specific region.           |
-| `outputWidth`     | `number`                                   | Target output width when scaling the image.             |
-| `outputHeight`    | `number`                                   | Target output height when scaling the image.            |
-| `fit`             | `"contain" \| "cover" \| "fill"`           | Resizing behavior when output scale differs.            |
+| `outputWidth`     | `number`                                   | Output image width. Default: canvas/crop width.         |
+| `outputHeight`    | `number`                                   | Output image height. Default: canvas/crop height.       |
+| `fit`             | `"contain" \| "cover" \| "fill"`           | Fit strategy when canvas/crop size differs from output. |
 | `format`          | `"svg" \| "png" \| "webp" \| "pdf"`        | Output format. Default: `"svg"`.                        |
 | `resolveResource` | `ResourceResolver`                         | Async callback to fetch assets (fonts, images, CSS).    |
 | `fonts`           | `Object[]`                                 | Pre-load fonts: `[{ name, data: Uint8Array }]`.         |

package/dist/core.d.ts

@@ -36,19 +36,35 @@ export interface ResolvedFontResult {
 }
 export type ResourceResolver = (resource: RequiredResource, defaultResolver: (resource: RequiredResource) => Promise<Uint8Array | ResolvedFontResult | null>) => Promise<Uint8Array | ArrayBufferView | ResolvedFontResult | null>;
 export interface RenderOptions {
+    /** Input content (HTML string or state object) */
     value?: string | string[] | any | any[];
+    /** Source URL */
     url?: string;
+    /** Canvas width for layout (used for CSS calculations) */
     width: number;
+    /** Canvas height for layout. If omitted, determined automatically by content height */
     height?: number;
+    /** Cropping options for the source canvas */
     crop?: {
         x: number;
         y: number;
         width: number;
         height: number;
     };
+    /** Final output image width. Defaults to width (or crop.width) */
     outputWidth?: number;
+    /** Final output image height. Defaults to height (or crop.height) */
     outputHeight?: number;
+    /** Resizing strategy to fit the canvas into the output size (default: "contain") */
     fit?: "contain" | "cover" | "fill";
+    /** Alignment origin when fitted (default: {x: 0.5, y: 0.5}) */
+    fitPosition?: {
+        x: number;
+        y: number;
+    };
+    /** Background color of the output canvas. (e.g., "#ffffff", "rgba(0,0,0,0.5)") */
+    backgroundColor?: string;
+    /** Output format */
     format?: "svg" | "png" | "webp" | "pdf";
     textToPaths?: boolean;
     resolveResource?: ResourceResolver;
@@ -95,11 +111,17 @@ export declare abstract class SatoruBase {
         outputWidth?: number;
         outputHeight?: number;
         fit?: "contain" | "cover" | "fill";
+        fitPosition?: {
+            x: number;
+            y: number;
+        };
+        backgroundColor?: string;
         format?: "svg" | "png" | "webp" | "pdf";
         textToPaths?: boolean;
     }): Promise<string | Uint8Array>;
     destroyInstance(inst: any): Promise<void>;
     loadFallbackFont(data: Uint8Array): Promise<void>;
+    protected parseColor(color?: string): number;
     protected abstract resolveDefaultResource(resource: RequiredResource, baseUrl?: string, userAgent?: string): Promise<Uint8Array | ResolvedFontResult | null>;
     protected abstract fetchHtml(url: string, userAgent?: string): Promise<string>;
     render(options: RenderOptions & {

package/dist/core.js

@@ -237,6 +237,9 @@ export class SatoruBase {
             cropY: options.crop?.y ?? 0,
             cropWidth: options.crop?.width ?? 0,
             cropHeight: options.crop?.height ?? 0,
+            fitPositionX: options.fitPosition?.x ?? 0.5,
+            fitPositionY: options.fitPosition?.y ?? 0.5,
+            backgroundColor: this.parseColor(options.backgroundColor),
         });
         if (!result) {
             if (options.format === "svg")
@@ -262,6 +265,36 @@ export class SatoruBase {
             mod.destroy_instance(inst);
         }
     }
+    parseColor(color) {
+        if (!color)
+            return 0x00000000;
+        if (color.startsWith("#")) {
+            let hex = color.slice(1);
+            if (hex.length === 3) {
+                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+            }
+            if (hex.length === 6) {
+                return (0xff000000 | parseInt(hex, 16)) >>> 0;
+            }
+            if (hex.length === 8) {
+                // RRGGBBAA -> AARRGGBB
+                const r = hex.slice(0, 2);
+                const g = hex.slice(2, 4);
+                const b = hex.slice(4, 6);
+                const a = hex.slice(6, 8);
+                return parseInt(a + r + g + b, 16) >>> 0;
+            }
+        }
+        const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+        if (m) {
+            const r = parseInt(m[1]);
+            const g = parseInt(m[2]);
+            const b = parseInt(m[3]);
+            const a = m[4] ? Math.round(parseFloat(m[4]) * 255) : 255;
+            return ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
+        }
+        return 0x00000000;
+    }
     async render(options) {
         let { format = "svg", value, url, baseUrl } = options;
         if (format === "pdf" && Array.isArray(value) && value.length > 1) {
@@ -374,7 +407,7 @@ export class SatoruBase {
                         catch (e) {
                             // fall through
                         }
-                        let typeInt = 1;
+                        let typeInt = 1; // Font
                         if (r.type === "image")
                             typeInt = 2;
                         if (r.type === "css")
@@ -382,7 +415,7 @@ export class SatoruBase {
                         mod.add_resource(instancePtr, r.url, typeInt, uint8);
                     })();
                 }
-                let typeInt = 1;
+                let typeInt = 1; // Font
                 if (r.type === "image")
                     typeInt = 2;
                 if (r.type === "css")
@@ -422,7 +455,7 @@ export class SatoruBase {
                                 "fonts" in data) {
                                 const fontResult = data;
                                 // Load the CSS first so C++ can parse @font-face
-                                mod.add_resource(instancePtr, r.url, 1, // Font type
+                                mod.add_resource(instancePtr, r.url, 3, // Css type
                                 fontResult.css);
                                 // Then load all prefetched font binaries directly
                                 for (const font of fontResult.fonts) {
@@ -476,6 +509,9 @@ export class SatoruBase {
                 cropY: options.crop?.y ?? 0,
                 cropWidth: options.crop?.width ?? 0,
                 cropHeight: options.crop?.height ?? 0,
+                fitPositionX: options.fitPosition?.x ?? 0.5,
+                fitPositionY: options.fitPosition?.y ?? 0.5,
+                backgroundColor: this.parseColor(options.backgroundColor),
             });
             if (!result) {
                 if (format === "svg")

package/dist/node.js

@@ -12,7 +12,7 @@ export class Satoru extends SatoruBase {
             if (resource.url.startsWith("provider:google-fonts")) {
                 return resolveGoogleFonts(resource, userAgent);
             }
-            const isAbsolute = /^[a-z][a-z0-9+.-]*:/i.test(resource.url);
+            const isAbsolute = /^[a-z][a-z0-9+.-]*:\/\//i.test(resource.url) || resource.url.startsWith("data:");
             let baseDir = baseUrl
                 ? baseUrl.startsWith("file://")
                     ? baseUrl.slice(7)
@@ -24,7 +24,7 @@ export class Satoru extends SatoruBase {
             if (!isAbsolute &&
                 !/^[a-z][a-z0-9+.-]*:\/\//i.test(baseDir) &&
                 !baseDir.startsWith("data:")) {
-                const filePath = path.join(baseDir, resource.url);
+                const filePath = path.isAbsolute(resource.url) ? resource.url : path.join(baseDir, resource.url);
                 if (fs.existsSync(filePath)) {
                     return new Uint8Array(fs.readFileSync(filePath));
                 }
@@ -33,8 +33,16 @@ export class Satoru extends SatoruBase {
             if (isAbsolute) {
                 finalUrl = resource.url;
             }
-            else if (baseUrl && /^[a-z][a-z0-9+.-]*:/i.test(baseUrl)) {
-                finalUrl = new URL(resource.url, baseUrl).href;
+            else if (baseUrl) {
+                try {
+                    const base = /^[a-z][a-z0-9+.-]*:\/\//i.test(baseUrl)
+                        ? baseUrl
+                        : new URL(`file:///${baseUrl.replace(/\\/g, "/")}`).href;
+                    finalUrl = new URL(resource.url, base).href;
+                }
+                catch (e) {
+                    // ignore
+                }
             }
             if (!finalUrl)
                 return null;