DOM Capture Engine

这是一款DOM捕获引擎，核心功能是将任意DOM子树导出为SVG、PNG、JPG等图片格式，或Canvas、Blob；支持内联样式、字体、伪元素、Shadow DOM，可配置输出尺寸、质量等，还支持插件扩展。典型场景包括网页元素截图、DOM转图片、生成网页快照。输入为目标DOM元素及可选配置，输出对应格式文件/对象，兼容xbrowser环境。

openlark

热度 29.94

最近更新 2026-05-11 17:46:45

分类：开发依赖：代码执行 / 联网浏览搜索应用场景：代码生成 / API 集成 / 自动化脚本

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add snapdom

Metadata

name: snapdom
description: DOM capture engine that can export any DOM subtree as SVG, PNG, JPG, WebP, Canvas, or Blob, supporting inline styles, fonts, background images, pseudo-elements, and Shadow DOM.

snapdom — DOM Capture Engine

Use Cases

Use this skill when users request to take a screenshot of a web page element, DOM node, or HTML fragment, export it as an image, generate a web page snapshot, or convert any DOM element to an image/Canvas.

Installation

NPM:

npm i @zumer/snapdom

CDN (script tag):

<script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.js"></script>

Quick Start

Shortcuts (One-off export)

import { snapdom } from '@zumer/snapdom';

// Export a DOM element as PNG
const png = await snapdom.toPng(document.querySelector('#card'));
document.body.appendChild(png);

// Other formats
const blob = await snapdom.toBlob(document.querySelector('#card'));
const svgImg = await snapdom.toSvg(document.querySelector('#card'));

Reusable Capture (Clone once, export multiple times)

const result = await snapdom(document.querySelector('#card'));
const png = await result.toPng();
const jpg = await result.toJpg({ quality: 0.92 });
await result.download({ format: 'jpg', filename: 'card.jpg' });

Common Options

Option	Type	Default	Description
`scale`	number	1	Output scale multiplier
`width` / `height`	number	-	Force output dimensions
`quality`	number	1	JPG/WebP quality 0~1
`backgroundColor`	string	`"#fff"`	Background color for JPG/WebP
`embedFonts`	boolean	false	Embed non-icon fonts
`useProxy`	string	`''`	CORS proxy URL
`exclude`	string[]	-	CSS selectors to exclude
`filter`	function	-	Filter function `(el) => boolean`
`debug`	boolean	false	Output silent errors to console.warn

Examples

// High-definition screenshot (2x)
await snapdom.toPng(el, { scale: 2 });

// CORS cross-origin images
await snapdom.toPng(el, { useProxy: 'https://proxy.corsfix.com/?' });

// Exclude elements
await snapdom.toPng(el, { exclude: ['.cookie-banner', '.tooltip'] });

// Filter out display:none elements
await snapdom.toPng(document.body, {
  filter: el => window.getComputedStyle(el).display !== 'none'
});

xbrowser Integration

When capturing in a xbrowser environment, SnapDOM must be run through the browser's execution context. Recommended pattern:

// After an xbrowser snapshot, execute in the page via evaluate
await browser.evaluate(async (selector) => {
  const { snapdom } = window._snapdom || await import('https://unpkg.com/@zumer/snapdom/dist/snapdom.mjs');
  const el = document.querySelector(selector);
  if (!el) throw new Error(`Element not found: ${selector}`);
  const result = await snapdom(el, { scale: 2, embedFonts: true });
  const dataUrl = await result.toPng();
  return dataUrl;
}, selector);

See references/api_reference.md for detailed API documentation and full options list.

Plugins

Install official plugins:

npm install @zumer/snapdom-plugins

import { snapdom } from '@zumer/snapdom';
import { filter, timestampOverlay } from '@zumer/snapdom-plugins';

snapdom.plugins(
  [filter, { preset: 'grayscale' }],
  [timestampOverlay, { position: 'bottom-right' }]
);

const out = await snapdom(element);
const png = await out.toPng();

Plugin lifecycle hooks: beforeSnap → beforeClone → afterClone → beforeRender → afterRender → beforeExport → afterExport.

Example Reference assets/demo.html。