snapdom by 2025emma/vibe-coding-cn
npx skills add https://github.com/2025emma/vibe-coding-cn --skill snapdom快速、无依赖的 DOM 转图像捕获库,用于将 HTML 元素转换为可缩放的 SVG 或光栅图像格式。
在以下情况下使用 SnapDOM:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
npm install @zumer/snapdom
# 或
yarn add @zumer/snapdom
<script type="module">
import { snapdom } from "https://unpkg.com/@zumer/snapdom/dist/snapdom.mjs";
</script>
<script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.umd.js"></script>
// 创建可重用的捕获对象
const result = await snapdom(document.querySelector('#target'));
// 导出为不同格式
const png = await result.toPng();
const jpg = await result.toJpg();
const svg = await result.toSvg();
const canvas = await result.toCanvas();
const blob = await result.toBlob();
// 使用结果
document.body.appendChild(png);
// 无需中间对象的直接导出
const png = await snapdom.toPng(document.querySelector('#target'));
const svg = await snapdom.toSvg(element);
// 自动下载为文件
await snapdom.download(element, 'screenshot.png');
await snapdom.download(element, 'image.svg');
const result = await snapdom(element, {
scale: 2, // 2倍分辨率
width: 800, // 自定义宽度
height: 600, // 自定义高度
embedFonts: true, // 包含 @font-face
exclude: '.no-capture', // 隐藏元素
useProxy: true, // 启用 CORS 代理
straighten: true, // 移除变换
noShadows: false // 保留阴影
});
const png = await result.toPng({ quality: 0.95 });
| 选项 | 类型 | 用途 |
|---|---|---|
scale | Number | 缩放输出(例如,2 表示 2 倍分辨率) |
width | Number | 自定义输出宽度(像素) |
height | Number | 自定义输出高度(像素) |
embedFonts | Boolean | 包含非图标 @font-face 规则 |
useProxy | String | Boolean |
exclude | String | 用于隐藏元素的 CSS 选择器 |
straighten | Boolean | 移除平移/旋转变换 |
noShadows | Boolean | 去除阴影效果 |
// 在不同缩放比例下捕获
const mobile = await snapdom.toPng(element, { scale: 1 });
const tablet = await snapdom.toPng(element, { scale: 1.5 });
const desktop = await snapdom.toPng(element, { scale: 2 });
// 从捕获中隐藏特定元素
const png = await snapdom.toPng(element, {
exclude: '.controls, .watermark, [data-no-capture]'
});
// 使用特定尺寸捕获
const result = await snapdom(element, {
width: 1200,
height: 630 // 标准社交媒体尺寸
});
// 针对 CORS 阻止资源的回退方案
const png = await snapdom.toPng(element, {
useProxy: 'https://cors.example.com/?' // 自定义代理
});
// 使用自定义导出器扩展
snapdom.plugins([pluginFactory, { colorOverlay: true }]);
// 挂钩到生命周期
defineExports(context) {
return {
pdf: async (ctx, opts) => { /* 生成 PDF */ }
};
}
// 可用的生命周期钩子:
// beforeSnap → beforeClone → afterClone →
// beforeRender → beforeExport → afterExport
SnapDOM 显著优于 html2canvas:
| 场景 | SnapDOM | html2canvas | 性能提升 |
|---|---|---|---|
| 小型 (200×100) | 1.6ms | 68ms | 快 42 倍 |
| 中型 (800×600) | 12ms | 280ms | 快 23 倍 |
| 大型 (4000×2000) | 171ms | 1,800ms | 快 10 倍 |
git clone https://github.com/zumerlab/snapdom.git
cd snapdom
npm install
npm run compile
npm test
在此处添加用于自动化的辅助脚本,例如:
batch-screenshot.js - 捕获多个元素pdf-export.js - 将快照转换为 PDFcompare-outputs.js - 比较 SVG 与 PNG 质量添加模板和示例:
scale 而非 width/height 以获得更好的性能embedFonts: true 以确保自定义字体正确显示useProxy: truequality: 0.95 以获得最佳质量straighten: falseembedFonts: trueuseProxy: truescale 值noShadows: true 跳过阴影渲染每周安装数
70
仓库
GitHub 星标数
13.7K
首次出现
2026年1月22日
安全审计
安装于
opencode52
claude-code52
gemini-cli51
codex49
cursor46
github-copilot38
Fast, dependency-free DOM-to-image capture library for converting HTML elements into scalable SVG or raster image formats.
Use SnapDOM when you need to:
npm install @zumer/snapdom
# or
yarn add @zumer/snapdom
<script type="module">
import { snapdom } from "https://unpkg.com/@zumer/snapdom/dist/snapdom.mjs";
</script>
<script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.umd.js"></script>
// Create reusable capture object
const result = await snapdom(document.querySelector('#target'));
// Export to different formats
const png = await result.toPng();
const jpg = await result.toJpg();
const svg = await result.toSvg();
const canvas = await result.toCanvas();
const blob = await result.toBlob();
// Use the result
document.body.appendChild(png);
// Direct export without intermediate object
const png = await snapdom.toPng(document.querySelector('#target'));
const svg = await snapdom.toSvg(element);
// Automatically download as file
await snapdom.download(element, 'screenshot.png');
await snapdom.download(element, 'image.svg');
const result = await snapdom(element, {
scale: 2, // 2x resolution
width: 800, // Custom width
height: 600, // Custom height
embedFonts: true, // Include @font-face
exclude: '.no-capture', // Hide elements
useProxy: true, // Enable CORS proxy
straighten: true, // Remove transforms
noShadows: false // Keep shadows
});
const png = await result.toPng({ quality: 0.95 });
| Option | Type | Purpose |
|---|---|---|
scale | Number | Scale output (e.g., 2 for 2x resolution) |
width | Number | Custom output width in pixels |
height | Number | Custom output height in pixels |
embedFonts | Boolean | Include non-icon @font-face rules |
useProxy | String | Boolean |
// Capture at different scales
const mobile = await snapdom.toPng(element, { scale: 1 });
const tablet = await snapdom.toPng(element, { scale: 1.5 });
const desktop = await snapdom.toPng(element, { scale: 2 });
// Hide specific elements from capture
const png = await snapdom.toPng(element, {
exclude: '.controls, .watermark, [data-no-capture]'
});
// Capture with specific size
const result = await snapdom(element, {
width: 1200,
height: 630 // Standard social media size
});
// Fallback for CORS-blocked resources
const png = await snapdom.toPng(element, {
useProxy: 'https://cors.example.com/?' // Custom proxy
});
// Extend with custom exporters
snapdom.plugins([pluginFactory, { colorOverlay: true }]);
// Hook into lifecycle
defineExports(context) {
return {
pdf: async (ctx, opts) => { /* generate PDF */ }
};
}
// Lifecycle hooks available:
// beforeSnap → beforeClone → afterClone →
// beforeRender → beforeExport → afterExport
SnapDOM significantly outperforms html2canvas:
| Scenario | SnapDOM | html2canvas | Improvement |
|---|---|---|---|
| Small (200×100) | 1.6ms | 68ms | 42x faster |
| Medium (800×600) | 12ms | 280ms | 23x faster |
| Large (4000×2000) | 171ms | 1,800ms | 10x faster |
git clone https://github.com/zumerlab/snapdom.git
cd snapdom
npm install
npm run compile
npm test
Add helper scripts here for automation, e.g.:
batch-screenshot.js - Capture multiple elementspdf-export.js - Convert snapshots to PDFcompare-outputs.js - Compare SVG vs PNG qualityAdd templates and examples:
scale instead of width/height for better performanceembedFonts: true to ensure custom fonts appear correctlyuseProxy: true if images fail to loadquality: 0.95 for best qualitystraighten: false if transforms are causing issuesembedFonts: trueuseProxy: truescale valuenoShadows: true to skip shadow renderingWeekly Installs
70
Repository
GitHub Stars
13.7K
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykWarn
Installed on
opencode52
claude-code52
gemini-cli51
codex49
cursor46
github-copilot38
React视图过渡API使用指南:实现原生浏览器动画与状态管理
5,700 周安装
.NET/C# 最佳实践指南:代码规范、设计模式、依赖注入与AI集成
9,300 周安装
UnoCSS 即时原子化 CSS 引擎:灵活可扩展,Tailwind CSS 超集,前端开发必备
9,200 周安装
VideoAgent AI视频生成器:文生视频/图生视频,支持7大模型一键制作短视频
9,300 周安装
Playwright MCP 测试生成工具 - 自动生成 TypeScript 端到端测试代码
9,500 周安装
Chrome DevTools 浏览器自动化与调试技能 - 网页性能分析、自动化测试工具
9,500 周安装
PostgreSQL优化助手 - JSONB操作、性能调优、窗口函数、全文搜索实战指南
9,600 周安装
exclude | String | CSS selector for elements to hide |
straighten | Boolean | Remove translate/rotate transforms |
noShadows | Boolean | Strip shadow effects |