Agent Skills
› nodetool-ai/nodetool
› sandbox-fabric
sandbox-fabric
GitHub提供基于 Fabric.js 的 SVG 渲染、解析及光栅化工具，支持将画布规格转换为图片字节、SVG 字符串或 Data URL。
Trigger Scenarios
需要将 Canvas 场景描述渲染为 PNG/JPG 图片
需要生成或导出 SVG 矢量图
需要解析现有 SVG 字符串并转换为 Fabric 对象
Install
npx skills add nodetool-ai/nodetool --skill sandbox-fabric -g -y
SKILL.md
Frontmatter
{
"name": "sandbox-fabric",
"description": "Build, parse, and rasterize SVG with Fabric.js (renderSVG, loadSVG, render)"
}
Fabric.js in the sandbox
Specifier: @nodetool-ai/sandbox-fabric. Import it at the top of the body.
render — Canvas spec / JSON to image bytes
Renders a scene description (objects, dimensions, background color) to raster
image bytes (Uint8Array):
import { render } from "@nodetool-ai/sandbox-fabric";
const imageBytes = await render({
width: 800,
height: 600,
backgroundColor: "#f8fafc",
objects: [
{
type: "rect",
left: 100,
top: 100,
width: 200,
height: 120,
fill: "#3b82f6",
rx: 10,
ry: 10
},
{
type: "textbox",
left: 120,
top: 140,
text: "NodeTool & Fabric.js",
fontSize: 20,
fill: "#ffffff"
}
]
}, { format: "png", multiplier: 1 });
return { image: imageBytes };
renderSVG — Canvas spec / JSON to SVG string
Renders a scene specification directly into an SVG string:
import { renderSVG } from "@nodetool-ai/sandbox-fabric";
const svgString = await renderSVG({
width: 500,
height: 500,
backgroundColor: "#ffffff",
objects: [
{
type: "circle",
left: 250,
top: 250,
radius: 100,
fill: "#ef4444"
}
]
});
return { svg: svgString };
toDataURL — Canvas spec to Data URL
Exports the scene as a base64 Data URL string:
import { toDataURL } from "@nodetool-ai/sandbox-fabric";
const dataUrl = await toDataURL({
width: 400,
height: 300,
objects: [
{ type: "rect", left: 50, top: 50, width: 100, height: 100, fill: "green" }
]
}, { format: "png" });
return { dataUrl };
loadSVG — Parse SVG string into Fabric objects
Parses an SVG document into Fabric objects and canvas options:
import { loadSVG, render } from "@nodetool-ai/sandbox-fabric";
const parsed = await loadSVG("<svg ...>...</svg>");
const imageBytes = await render({
width: 600,
height: 400,
objects: parsed.objects
});
return { image: imageBytes };
Gotchas
- Host execution. Fabric.js depends on canvas and DOM APIs that do not exist in the pure WebAssembly QuickJS guest. It runs on the host and passes plain serializable data across the sandbox boundary.
- Dimensions are bounded. Canvas dimensions are clamped to a maximum of 8192 pixels to prevent excessive memory consumption.
Version History
- a6a7e57 Current 2026-08-20 09:52
