Habilidades snapdom
📸
需要将样式化的DOM元素捕获为图片吗？SnapDOM提供快速、准确的DOM转图片转换，支持SVG、PNG、JPG和WebP格式，同时保留字体、伪元素和CSS效果。
Soporta: Claude Codex Code(CC)
1
Descargar el ZIP de la skill
2
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
3
Activa y empieza a usar
Pruébalo
Usando "snapdom". 将主标题部分捕获为PNG图片，保留我的公司标志和自定义字体。
Resultado esperado:
- ✓ 已捕获带有嵌入字体的主标题部分
- ✓ 输出：2倍缩放的PNG（高分辨率）
- ✓ 保留：自定义排版、标志、CSS效果
- ✓ 准备好下载或直接插入DOM
Auditoría de seguridad
Segurov3 • 1/10/2026
This skill consists entirely of markdown documentation files describing a browser-based JavaScript library. No executable code, scripts, network calls, or filesystem access beyond its own documentation files were detected. The skill is purely informational.
3
Archivos escaneados
301
Líneas analizadas
0
hallazgos
3
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude Ver historial de auditorías →
Puntuación de calidad
41
Arquitectura
100
Mantenibilidad
83
Contenido
21
Comunidad
100
Seguridad
87
Cumplimiento de la especificación
Lo que puedes crear
生成组件截图
自动捕获UI组件用于文档、测试产物或设计系统导出。
创建社交媒体图片
将样式化的HTML布局转换为适当尺寸的社交媒体图片，同时保留品牌元素。
视觉回归测试
捕获DOM快照进行视觉差异比较，以检测非预期的样式变化。
Prueba estos prompts
基本元素捕获
使用SnapDOM将此元素捕获为PNG图片，缩放比例为2倍以获得高分辨率。
SVG导出
将此图表元素转换为SVG格式，嵌入所有自定义字体并保留CSS变换。
批量捕获
捕获此页面上所有图表卡片为独立的PNG文件，自定义尺寸为800x600。
代理配置
捕获包含来自外部域名的图片的仪表板部分，为被阻止的资源使用CORS代理。
Mejores prácticas
- 对于高分辨率捕获，使用scale参数而非width/height以获得更好性能
- 启用embedFonts: true以确保自定义字体在导出的图片中正确渲染
- 当捕获包含外部域图片的元素时，设置useProxy: true以避免CORS问题
Evitar
- 避免捕获极大的页面部分；拆分为较小的块以获得更好性能
- 不要忘记在捕获带有自定义排版的元素之前等待字体完全加载
- 避免将PNG/JPG导出的质量设置低于0.9，因为这会导致明显的压缩伪影
Preguntas frecuentes
SnapDOM支持哪些格式？
SnapDOM支持SVG（矢量）、PNG、JPG、WebP（光栅）、Canvas和Blob导出。SVG最适合可缩放图形，而PNG/JPG适合照片。
我可以在Node.js中使用SnapDOM吗？
不可以，SnapDOM是仅限浏览器的库，需要DOM API。要进行服务器端渲染，请考虑puppeteer或类似的Headless浏览器解决方案。
SnapDOM与html2canvas相比如何？
SnapDOM在复杂元素上比html2canvas快10-40倍（小元素1.6ms对比68ms），同时支持更多CSS功能如伪元素。
跨域图片会怎样处理？
跨域图片会被浏览器安全机制阻止。启用useProxy: true以通过CORS代理路由请求，或确保所有资源都是同源的。
SnapDOM会保留CSS变换和阴影吗？
是的，SnapDOM保留CSS变换、阴影和伪元素。如需更干净的输出，使用straighten: true来移除变换。
支持哪些浏览器？
Chrome/Edge 90+、Firefox 88+、Safari 14+以及移动浏览器（iOS Safari 14+、Chrome Mobile）。旧版浏览器可能支持有限。