Fähigkeiten snapdom
📸

snapdom

Sicher

Конвертировать HTML-элементы в изображения

Auch verfügbar von: 2025Emma

Нужно захватить стилизованные DOM-элементы как изображения? SnapDOM обеспечивает быструю и точную конверсию DOM в изображения с поддержкой форматов SVG, PNG, JPG и WebP, сохраняя шрифты, псевдоэлементы и CSS-эффекты.

Unterstützt: Claude Codex Code(CC)
📊 69 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "snapdom". Capture the main heading section as a PNG with my company logo and custom fonts preserved.

Erwartetes Ergebnis:

  • ✓ Захвачен секция заголовка со встроенными шрифтами
  • ✓ Вывод: PNG с масштабом 2x (высокое разрешение)
  • ✓ Сохранено: пользовательская типографика, логотип, CSS-эффекты
  • ✓ Готово к скачиванию или прямой вставке в DOM

Sicherheitsaudit

Sicher
v3 • 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
Gescannte Dateien
301
Analysierte Zeilen
0
befunde
3
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude Audit-Verlauf anzeigen →

Qualitätsbewertung

41
Architektur
100
Wartbarkeit
83
Inhalt
22
Community
100
Sicherheit
87
Spezifikationskonformität

Was du bauen kannst

Создание скриншотов компонентов

Автоматически захватывать UI-компоненты для документации, артефактов тестирования или экспорта дизайн-систем.

Создание изображений для социальных сетей

Конвертировать стилизованные HTML-макеты в правильно размерные изображения для социальных сетей с сохранением брендовых элементов.

Визуальное регрессионное тестирование

Захватывать DOM-снимки для визуальных сравнений diff для обнаружения непреднамеренных изменений стилей.

Probiere diese Prompts

Базовый захват элемента
Use SnapDOM to capture this element as a PNG image with 2x scale for high resolution.
Экспорт SVG
Convert this chart element to SVG format, embedding all custom fonts and keeping CSS transforms.
Пакетный захват
Capture all chart cards on this page as individual PNG files with custom dimensions of 800x600.
Конфигурация прокси
Capture this dashboard section that includes images from external domains, using a CORS proxy for blocked assets.

Bewährte Verfahren

  • Используйте параметр scale вместо width/height для лучшей производительности при захвате в высоком разрешении
  • Включите embedFonts: true для корректного рендеринга пользовательских шрифтов в экспортированных изображениях
  • Установите useProxy: true при захвате элементов с изображениями из внешних доменов для избежания проблем с CORS

Vermeiden

  • Избегайте захвата очень больших секций страницы; разбивайте на меньшие части для лучшей производительности
  • Не забывайте дожидаться полной загрузки шрифтов перед захватом элементов с пользовательской типографикой
  • Избегайте установки качества ниже 0.9 для экспорта PNG/JPG, так как это вызывает видимые артефакты сжатия

Häufig gestellte Fragen

Какие форматы поддерживает SnapDOM?
SnapDOM поддерживает экспорт в SVG (вектор), PNG, JPG, WebP (растр), Canvas и Blob. SVG лучше всего подходит для масштабируемой графики, а PNG/JPG — для фотографий.
Можно ли использовать SnapDOM в Node.js?
Нет, SnapDOM — это библиотека только для браузера, требующая DOM API. Для серверного рендеринга рассмотрите puppeteer или подобные решения с headless-браузерами.
Как SnapDOM сравнивается с html2canvas?
SnapDOM в 10-40 раз быстрее html2canvas на сложных элементах (1.6 мс против 68 мс для небольших элементов), при этом поддерживая больше CSS-функций, таких как псевдоэлементы.
Что происходит с кросс-ориджин изображениями?
Изображения с кросс-ориджин заблокированы браузерной безопасностью. Включите useProxy: true для маршрутизации запросов через CORS-прокси или убедитесь, что все ресурсы одного происхождения.
SnapDOM сохраняет CSS-трансформы и тени?
Да, SnapDOM сохраняет CSS-трансформы, тени и псевдоэлементы. Используйте straighten: true для удаления трансформ при необходимости для более чистого вывода.
Какие браузеры поддерживаются?
Chrome/Edge 90+, Firefox 88+, Safari 14+ и мобильные браузеры (iOS Safari 14+, Chrome Mobile). Более старые браузеры могут иметь ограниченную поддержку.

Entwicklerdetails

Dateistruktur

📁 references/

📄 index.md

📄 other.md

📄 SKILL.md