Agent Skills
› nodetool-ai/nodetool
› sandbox-fabric
sandbox-fabric
GitHub在沙箱环境中使用 Fabric.js 构建、解析和光栅化 SVG。提供将画布规范渲染为图像字节、SVG 字符串或 Data URL 的功能，并支持将 SVG 字符串解析为 Fabric 对象，实现跨边界的序列化数据交互。
Trigger Scenarios
需要将 JSON 画布描述转换为图片输出
需要解析 SVG 字符串并进一步处理
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
