koishi-plugin-vercel-satori-png-service 0.1.9 → 0.2.1

package/lib/Satori.d.ts

@@ -1,10 +1,9 @@
 import { Readable } from "node:stream";
 import * as resvg from "@resvg/resvg-wasm";
+import Vips from "wasm-vips";
 import { ReactElement } from "react";
-import { ImageOptions } from "./og";
+import { ImageOptions, Logger } from "./og";
 export declare const initSatori: () => Promise<void>;
-export declare const createNodejsStream: (element: ReactElement<any, any>, options: ImageOptions) => Promise<Readable>;
-export declare const renderSvg: (element: ReactElement<any, any>, options: ImageOptions) => Promise<string>;
 export declare const getResvg: () => new (svg: Uint8Array | string, options?: resvg.ResvgRenderOptions) => {
     free(): void;
     render(): {
@@ -41,3 +40,7 @@ export declare const getResvg: () => new (svg: Uint8Array | string, options?: re
     readonly height: number;
     readonly width: number;
 };
+export declare const getVips: () => typeof Vips;
+export declare const createNodejsStream: (element: ReactElement<any, any>, options: ImageOptions, logger: Logger) => Promise<Readable>;
+export declare const svgToPng: (svg: string, options: ImageOptions, logger: Logger) => Promise<Readable>;
+export declare const renderSvg: (element: ReactElement<any, any>, options: ImageOptions, logger: Logger) => Promise<string>;

package/lib/index.d.ts

@@ -1,5 +1,6 @@
 import { Context, Schema, Service } from "koishi";
 import { ReactElement } from "react";
+import SkiaCanvas from "skia-canvas";
 import { Readable } from "stream";
 import { Font, ImageOptions } from "./og";
 export { Font, ImageOptions } from "./og";
@@ -14,15 +15,8 @@ declare class VercelSatoriPngService extends Service {
     private fonts;
     constructor(ctx: Context, config: VercelSatoriPngService.Config);
     start(): Promise<void>;
-    jsxToReactElement(jsxCode: string, data?: Record<any, any>): Promise<ReactElement<any, any>>;
-    htmlToReactElement(htmlCode: string): ReactElement<any, any>;
     addFont(fonts: Font[]): void;
     removeFont(fonts: Font[]): void;
-    private buildOptions;
-    jsxToPng(jsxCode: string, options?: ImageOptions, data?: Record<any, any>): Promise<Readable>;
-    htmlToPng(htmlCode: string, options?: ImageOptions): Promise<Readable>;
-    reactElementToPng(reactElement: ReactElement<any, any>, options?: ImageOptions): Promise<Readable>;
-    reactElementToSvg(reactElement: ReactElement<any, any>, options?: ImageOptions): Promise<string>;
     getResvg(): new (svg: Uint8Array | string, options?: import("@resvg/resvg-wasm").ResvgRenderOptions) => {
         free(): void;
         render(): {
@@ -59,6 +53,16 @@ declare class VercelSatoriPngService extends Service {
         readonly height: number;
         readonly width: number;
     };
+    getVips(): typeof import("wasm-vips");
+    getSkiaCanvas(): typeof SkiaCanvas;
+    jsxToReactElement(jsxCode: string, data?: Record<any, any>): Promise<ReactElement<any, any>>;
+    htmlToReactElement(htmlCode: string): ReactElement<any, any>;
+    jsxToPng(jsxCode: string, options?: ImageOptions, data?: Record<any, any>): Promise<Readable>;
+    htmlToPng(htmlCode: string, options?: ImageOptions): Promise<Readable>;
+    private buildOptions;
+    reactElementToPng(reactElement: ReactElement<any, any>, options?: ImageOptions): Promise<Readable>;
+    svgToPng(svg: string, options?: ImageOptions): Promise<Readable>;
+    reactElementToSvg(reactElement: ReactElement<any, any>, options?: ImageOptions): Promise<string>;
 }
 declare namespace VercelSatoriPngService {
     const usage: string;

package/lib/index.js

@@ -37,6 +37,7 @@ var import_koishi = require("koishi");
 var import_react = __toESM(require("react"));
 var import_sucrase = require("sucrase");
 var import_html_react_parser = __toESM(require("html-react-parser"));
+var import_skia_canvas2 = __toESM(require("skia-canvas"));
 
 // src/Satori.ts
 var import_node_path = __toESM(require("node:path"));
@@ -44,6 +45,7 @@ var import_promises = __toESM(require("node:fs/promises"));
 var import_node_module = require("node:module");
 var import_node_stream = require("node:stream");
 var resvg = __toESM(require("@resvg/resvg-wasm"));
+var import_wasm_vips = __toESM(require("wasm-vips"));
 
 // src/emoji.ts
 var U200D = String.fromCharCode(8205);
@@ -192,6 +194,9 @@ var languageFontMap = {
 };
 
 // src/og.ts
+var import_skia_canvas = __toESM(require("skia-canvas"));
+var import_canvg = require("canvg");
+var import_jsdom = require("jsdom");
 async function loadGoogleFont(font, text) {
   if (!font || !text) return;
   const API = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(
@@ -250,18 +255,9 @@ var loadDynamicAsset = /* @__PURE__ */ __name(({ emoji }) => {
     return asset;
   };
 }, "loadDynamicAsset");
-function mergeOptions(opts) {
-  return Object.assign(
-    {
-      debug: false
-    },
-    opts
-  );
-}
-__name(mergeOptions, "mergeOptions");
-async function renderSvg(satori2, opts, defaultFonts, element) {
-  const options = mergeOptions(opts);
-  return await satori2(element, {
+async function renderSvg(satori2, logger, options, defaultFonts, element) {
+  const startTime = options.showLog ? Date.now() : void 0;
+  const svg = await satori2(element, {
     width: options.width,
     height: options.height,
     debug: options.debug,
@@ -270,38 +266,80 @@ async function renderSvg(satori2, opts, defaultFonts, element) {
       emoji: options.emoji
     })
   });
+  if (options.showLog) {
+    logger(
+      `renderSvg time: ${Date.now() - startTime}ms; svg size: ${svg.length}`
+    );
+  }
+  return svg;
 }
 __name(renderSvg, "renderSvg");
-async function render(satori2, resvg2, opts, defaultFonts, element) {
-  const options = mergeOptions(opts);
-  const svg = await satori2(element, {
-    width: options.width,
-    height: options.height,
-    debug: options.debug,
-    fonts: options.fonts || defaultFonts,
-    loadAdditionalAsset: loadDynamicAsset({
-      emoji: options.emoji
-    })
-  });
-  const resvgJS = new resvg2.Resvg(svg, {
-    fitTo: {
-      mode: "width",
-      value: options.width
+async function svgToPng(resvg2, vips2, logger, options, svg) {
+  const startTime = options.showLog ? Date.now() : void 0;
+  let pngBuffer;
+  switch (options.converter) {
+    case "skia-canvas-canvg": {
+      const canvas = new import_skia_canvas.default.Canvas(1, 1);
+      const ctx = canvas.getContext("2d");
+      const dom = new import_jsdom.JSDOM();
+      const v = import_canvg.Canvg.fromString(ctx, svg, {
+        window: dom.window,
+        DOMParser: dom.window.DOMParser,
+        createCanvas: /* @__PURE__ */ __name((w, h) => new import_skia_canvas.default.Canvas(w, h), "createCanvas"),
+        createImage: import_skia_canvas.default.Image,
+        ignoreDimensions: false
+      });
+      await v.render();
+      pngBuffer = await canvas.toBuffer("png");
+      break;
     }
-  });
-  const pngData = resvgJS.render();
-  const pngBuffer = pngData.asPng();
-  pngData.free();
-  resvgJS.free();
+    case "skia-canvas": {
+      const img = await import_skia_canvas.default.loadImage(Buffer.from(svg));
+      const canvas = new import_skia_canvas.default.Canvas(img.width, img.height);
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(img, 0, 0);
+      pngBuffer = await canvas.toBuffer("png");
+      break;
+    }
+    case "vips": {
+      const img = vips2.Image.svgloadBuffer(Buffer.from(svg));
+      pngBuffer = img.pngsaveBuffer();
+      img.delete();
+      break;
+    }
+    case "resvg":
+    default: {
+      const resvgJS = new resvg2.Resvg(svg);
+      const pngData = resvgJS.render();
+      pngBuffer = pngData.asPng();
+      pngData.free();
+      resvgJS.free();
+      break;
+    }
+  }
+  if (options.showLog) {
+    logger(
+      `svgToPng time: ${Date.now() - startTime}ms; converter:${options.converter}; png size: ${pngBuffer.length}`
+    );
+  }
   return pngBuffer;
 }
+__name(svgToPng, "svgToPng");
+async function render(satori2, resvg2, vips2, logger, options, defaultFonts, element) {
+  const svg = await renderSvg(satori2, logger, options, defaultFonts, element);
+  return svgToPng(resvg2, vips2, logger, options, svg);
+}
 __name(render, "render");
 
 // src/Satori.ts
 var fontData;
 var satori;
+var vips;
 var initSatori = /* @__PURE__ */ __name(async () => {
   satori = (await import("satori")).default;
+  vips = await (0, import_wasm_vips.default)({
+    dynamicLibraries: ["vips-resvg.wasm"]
+  });
   const require2 = (0, import_node_module.createRequire)("file:///" + __filename);
   const reSvgWasm = import_node_path.default.join(
     import_node_path.default.dirname(require2.resolve("@resvg/resvg-wasm")),
@@ -312,6 +350,12 @@ var initSatori = /* @__PURE__ */ __name(async () => {
     require2.resolve("../noto-sans-v27-latin-regular.ttf")
   );
 }, "initSatori");
+var getResvg = /* @__PURE__ */ __name(() => {
+  return resvg.Resvg;
+}, "getResvg");
+var getVips = /* @__PURE__ */ __name(() => {
+  return vips;
+}, "getVips");
 var getDefaultFonts = /* @__PURE__ */ __name(() => [
   {
     name: "sans serif",
@@ -320,22 +364,25 @@ var getDefaultFonts = /* @__PURE__ */ __name(() => [
     style: "normal"
   }
 ], "getDefaultFonts");
-var createNodejsStream = /* @__PURE__ */ __name(async (element, options) => {
+var createNodejsStream = /* @__PURE__ */ __name(async (element, options, logger) => {
   const result = await render(
     satori,
     resvg,
+    vips,
+    logger,
     options,
     getDefaultFonts(),
     element
   );
   return import_node_stream.Readable.from(Buffer.from(result));
 }, "createNodejsStream");
-var renderSvg2 = /* @__PURE__ */ __name(async (element, options) => {
-  return renderSvg(satori, options, getDefaultFonts(), element);
+var svgToPng2 = /* @__PURE__ */ __name(async (svg, options, logger) => {
+  const result = await svgToPng(resvg, vips, logger, options, svg);
+  return import_node_stream.Readable.from(Buffer.from(result));
+}, "svgToPng");
+var renderSvg2 = /* @__PURE__ */ __name(async (element, options, logger) => {
+  return renderSvg(satori, logger, options, getDefaultFonts(), element);
 }, "renderSvg");
-var getResvg = /* @__PURE__ */ __name(() => {
-  return resvg.Resvg;
-}, "getResvg");
 
 // src/index.ts
 var serviceName = "vercelSatoriPngService";
@@ -360,6 +407,30 @@ var VercelSatoriPngService = class extends import_koishi.Service {
     await initSatori();
     initialized = true;
   }
+  addFont(fonts) {
+    this.fonts.push(...fonts);
+    this.ctx.on("dispose", () => {
+      this.removeFont(fonts);
+    });
+  }
+  removeFont(fonts) {
+    fonts.forEach((font) => {
+      const index = this.fonts.indexOf(font);
+      if (index === -1) {
+        return;
+      }
+      this.fonts.splice(index, 1);
+    });
+  }
+  getResvg() {
+    return getResvg();
+  }
+  getVips() {
+    return getVips();
+  }
+  getSkiaCanvas() {
+    return import_skia_canvas2.default;
+  }
   async jsxToReactElement(jsxCode, data) {
     const hCode = (0, import_sucrase.transform)(jsxCode, {
       transforms: ["jsx"],
@@ -387,20 +458,14 @@ var VercelSatoriPngService = class extends import_koishi.Service {
   htmlToReactElement(htmlCode) {
     return (0, import_html_react_parser.default)(htmlCode);
   }
-  addFont(fonts) {
-    this.fonts.push(...fonts);
-    this.ctx.on("dispose", () => {
-      this.removeFont(fonts);
-    });
+  async jsxToPng(jsxCode, options, data) {
+    return this.reactElementToPng(
+      await this.jsxToReactElement(jsxCode, data),
+      options
+    );
   }
-  removeFont(fonts) {
-    fonts.forEach((font) => {
-      const index = this.fonts.indexOf(font);
-      if (index === -1) {
-        return;
-      }
-      this.fonts.splice(index, 1);
-    });
+  htmlToPng(htmlCode, options) {
+    return this.reactElementToPng(this.htmlToReactElement(htmlCode), options);
   }
   buildOptions(options) {
     options ||= {};
@@ -410,27 +475,30 @@ var VercelSatoriPngService = class extends import_koishi.Service {
     }
     return options;
   }
-  async jsxToPng(jsxCode, options, data) {
-    return this.reactElementToPng(
-      await this.jsxToReactElement(jsxCode, data),
-      options
+  async reactElementToPng(reactElement, options) {
+    return createNodejsStream(
+      reactElement,
+      this.buildOptions(options),
+      this._ctx.logger.info.bind(this._ctx.logger)
     );
   }
-  htmlToPng(htmlCode, options) {
-    return this.reactElementToPng(this.htmlToReactElement(htmlCode), options);
-  }
-  async reactElementToPng(reactElement, options) {
-    return createNodejsStream(reactElement, this.buildOptions(options));
+  async svgToPng(svg, options) {
+    return svgToPng2(
+      svg,
+      this.buildOptions(options),
+      this._ctx.logger.info.bind(this._ctx.logger)
+    );
   }
   async reactElementToSvg(reactElement, options) {
-    return renderSvg2(reactElement, this.buildOptions(options));
-  }
-  getResvg() {
-    return getResvg();
+    return renderSvg2(
+      reactElement,
+      this.buildOptions(options),
+      this._ctx.logger.info.bind(this._ctx.logger)
+    );
   }
 };
 ((VercelSatoriPngService2) => {
-  VercelSatoriPngService2.usage = 'html to ReactElement <a target="_blank" href="https://www.npmjs.com/package/html-react-parser">html-react-parser</a>  \njsx to ReactElement <a target="_blank" href="https://www.npmjs.com/package/sucrase">sucrase</a>  \nReactElement to svg <a target="_blank" href="https://github.com/vercel/satori#overview">vercel/satori</a>  \n<a target="_blank" href="https://og-playground.vercel.app/">og-playground</a>  \nsvg to png <a target="_blank" href="https://www.npmjs.com/package/@resvg/resvg-wasm">@resvg/resvg-wasm</a>';
+  VercelSatoriPngService2.usage = 'html to ReactElement <a target="_blank" href="https://www.npmjs.com/package/html-react-parser">html-react-parser</a><br/>jsx to ReactElement <a target="_blank" href="https://www.npmjs.com/package/sucrase">sucrase</a><br/>ReactElement to svg <a target="_blank" href="https://github.com/vercel/satori#overview">vercel/satori</a> <a target="_blank" href="https://og-playground.vercel.app/">og-playground</a><br/><hr/>svg to png<br/><a target="_blank" href="https://www.npmjs.com/package/@resvg/resvg-wasm">@resvg/resvg-wasm</a><br/><a target="_blank" href="https://www.npmjs.com/package/wasm-vips">wasm-vips</a><br/><a target="_blank" href="https://www.npmjs.com/package/skia-canvas">skia-canvas</a> <a target="_blank" href="https://www.npmjs.com/package/canvg">canvg</a> <a target="_blank" href="https://www.npmjs.com/package/jsdom">jsdom</a><br/>';
   VercelSatoriPngService2.Config = import_koishi.Schema.object({});
 })(VercelSatoriPngService || (VercelSatoriPngService = {}));
 var src_default = VercelSatoriPngService;

package/lib/og.d.ts

@@ -3,6 +3,7 @@ import * as Resvg from "@resvg/resvg-wasm";
 import type Satori from "satori";
 import type { SatoriOptions } from "satori";
 import type { ReactElement } from "react";
+import type Vips from "wasm-vips";
 export type ImageOptions = {
     /**
      * The width of the image.
@@ -37,7 +38,16 @@ export type ImageOptions = {
      * @default 'twemoji'
      */
     emoji?: EmojiType;
+    /**
+     * The converter to use.
+     *
+     * @default 'resvg'
+     */
+    converter?: "resvg" | "vips" | "skia-canvas" | "skia-canvas-canvg";
+    showLog?: boolean;
 };
 export type Font = ImageOptions["fonts"][number];
-export declare function renderSvg(satori: typeof Satori, opts: ImageOptions, defaultFonts: Font[], element: ReactElement<any, any>): Promise<string>;
-export default function render(satori: typeof Satori, resvg: typeof Resvg, opts: ImageOptions, defaultFonts: Font[], element: ReactElement<any, any>): Promise<Uint8Array<ArrayBufferLike>>;
+export type Logger = (msg: string) => void;
+export declare function renderSvg(satori: typeof Satori, logger: Logger, options: ImageOptions, defaultFonts: Font[], element: ReactElement<any, any>): Promise<string>;
+export declare function svgToPng(resvg: typeof Resvg, vips: typeof Vips, logger: Logger, options: ImageOptions, svg: string): Promise<Uint8Array<ArrayBufferLike>>;
+export default function render(satori: typeof Satori, resvg: typeof Resvg, vips: typeof Vips, logger: Logger, options: ImageOptions, defaultFonts: Font[], element: ReactElement<any, any>): Promise<Uint8Array<ArrayBufferLike>>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "koishi-plugin-vercel-satori-png-service",
   "description": "Use Vercel Satori and Resvg.js to convert html to png",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "scripts": {
@@ -41,10 +41,14 @@
   },
   "dependencies": {
     "@resvg/resvg-wasm": "^2.6.3-alpha.2",
+    "canvg": "^4.0.3",
     "html-react-parser": "^5.2.11",
+    "jsdom": "27.0.1",
     "react": "^19.3.0-canary-fd524fe0-20251121",
     "satori": "^0.16.2",
-    "sucrase": "^3.35.1"
+    "skia-canvas": "^3.0.8",
+    "sucrase": "^3.35.1",
+    "wasm-vips": "^0.0.16"
   },
   "koishi": {
     "service": {
@@ -54,6 +58,7 @@
     }
   },
   "devDependencies": {
+    "@types/jsdom": "^27",
     "@types/react": "^19"
   }
 }

package/readme.md

@@ -11,7 +11,16 @@ html to ReactElement [html-react-parser](https://www.npmjs.com/package/html-reac
 jsx to ReactElement [sucrase](https://www.npmjs.com/package/sucrase)
 
 ReactElement to svg [vercel/satori](https://github.com/vercel/satori#overview)
-
 [og-playground](https://og-playground.vercel.app/)
 
-svg to png [@resvg/resvg-wasm](https://www.npmjs.com/package/@resvg/resvg-wasm)
+---
+
+svg to png
+
+[@resvg/resvg-wasm](https://www.npmjs.com/package/@resvg/resvg-wasm)
+
+[wasm-vips](https://www.npmjs.com/package/wasm-vips)
+
+[skia-canvas](https://www.npmjs.com/package/skia-canvas)
+[canvg](https://www.npmjs.com/package/canvg)
+[jsdom](https://www.npmjs.com/package/jsdom)

package/lib/emoji.d.ts

@@ -1,15 +0,0 @@
-/**
- * Modified version of https://unpkg.com/twemoji@13.1.0/dist/twemoji.esm.js.
- */
-export declare function getIconCode(char: string): string;
-declare const apis: {
-    twemoji: (code: any) => string;
-    openmoji: string;
-    blobmoji: string;
-    noto: string;
-    fluent: (code: any) => string;
-    fluentFlat: (code: any) => string;
-};
-export type EmojiType = keyof typeof apis;
-export declare function loadEmoji(code: string, type?: EmojiType): Promise<Response>;
-export {};

package/lib/language.d.ts

@@ -1,28 +0,0 @@
-export declare class FontDetector {
-    private rangesByLang;
-    detect(text: string, fonts: string[]): Promise<{
-        [lang: string]: string;
-    }>;
-    private detectSegment;
-    private load;
-    private addDetectors;
-}
-export declare const languageFontMap: {
-    'ja-JP': string;
-    'ko-KR': string;
-    'zh-CN': string;
-    'zh-TW': string;
-    'zh-HK': string;
-    'th-TH': string;
-    'bn-IN': string;
-    'ar-AR': string;
-    'ta-IN': string;
-    'ml-IN': string;
-    'he-IL': string;
-    'te-IN': string;
-    devanagari: string;
-    kannada: string;
-    symbol: string[];
-    math: string;
-    unknown: string;
-};