Repolode
Предложить
zumerlab

zumerlab/snapdom

JavaScript-движок для браузера, который захватывает DOM-элементы и экспортирует их в SVG, PNG, JPG, WebP, canvas или Blob; плагины добавляют поддержку HTML, PDF, векторной графики, GIF и видео.

Open source альтернатива:html2canvas

Открыть на GitHubСайт
Звёзды
8,197
Форки
307
Открытые issues
5
Последний коммит
10 часов назад

Что это?

SnapDOM захватывает DOM-элемент на странице и преобразует его в изображения, например SVG, PNG, JPG, WebP, canvas или Blob. Один захват можно использовать для создания нескольких форматов, а результат сохраняет состояние элемента на момент захвата, даже если исходный элемент изменится позже.

Официальные плагины позволяют преобразовать тот же захват в автономный HTML, PDF с поиском и разбиением на страницы, редактируемые SVG-векторы с данными для вставки в буфер обмена Figma, текстовый или JSON-контекст для агентов, анимированный GIF и видео, закодированное в браузере. Пользовательские экспортёры можно создавать с помощью документированных хуков плагинов. У ядра нет зависимостей, оно работает целиком в браузере; ему нужна DOM-среда, поэтому в обычном Node.js оно не запускается.

Библиотека позволяет настраивать размер результата, DPR, цвет фона, исключение или скрытие элементов, встраивание веб-шрифтов и обрезку. Экспорт в PNG обрабатывает захваты, превышающие ограничения размера canvas, а отдельная опция обрезки позволяет растеризовать большие страницы по частям.

Ключевые возможности

  • 01Захватывает DOM-элементы и за один захват создаёт SVG, PNG, JPG, WebP, canvas или Blob.
  • 02Повторно использует неизменившиеся захваты и при небольших изменениях перестраивает только затронутые поддеревья.
  • 03Официальные плагины позволяют экспортировать HTML, PDF, редактируемые векторы, GIF и видео.
  • 04Хуки плагинов позволяют разработчикам создавать собственные экспортёры.
  • 05Параметры задают размер, масштаб, фон, исключаемые элементы и встраивание шрифтов.
  • 06Работает в браузере через ES-модуль, тег script или объявления TypeScript.

Сценарии использования

  • Передача дашборда, графика или счёта из веб-приложения в виде изображения.
  • Создание PDF-отчётов или страниц для печати из отрисованного содержимого страницы.
  • Экспорт редактируемой векторной графики или вставка дизайнов в Figma.
  • Предоставление AI-агентам текстового или графического представления содержимого страницы.

Быстрый старт

  1. 1

    Установите основной пакет с помощью npm

    npm i @zumer/snapdom
  2. 2

    Импортируйте snapdom и экспортируйте элемент в PNG

Что важно знать

  • SnapDOM нужен DOM браузера, поэтому для Node.js на сервере требуется среда браузера.
  • Для изображений, шрифтов и таблиц стилей с других источников нужны доступные для чтения ресурсы или прокси; iframe с других источников отображаются как заполнители.
  • Вывод SVG зависит от foreignObject, поэтому вне браузеров поддержка может различаться.

Темы

#dom-to-image#screenshot#html-to-image#svg#pdf-export#canvas#browser#javascript#capture#dom

Частые вопросы

Что такое snapdom?
JavaScript-движок для браузера, который захватывает DOM-элементы и экспортирует их в SVG, PNG, JPG, WebP, canvas или Blob; плагины добавляют поддержку HTML, PDF, векторной графики, GIF и видео. SnapDOM захватывает DOM-элемент на странице и преобразует его в изображения, например SVG, PNG, JPG, WebP, canvas или Blob. Один захват можно использовать для создания нескольких форматов, а результат сохраняет состояние элемента на момент захвата, даже если исходный элемент изменится позже.
snapdom можно использовать бесплатно? Какая у него лицензия?
snapdom распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
snapdom всё ещё поддерживается?
Активно поддерживается. Последний коммит в snapdom — 20 окт. 2026 г..
Для чего можно использовать snapdom?
Передача дашборда, графика или счёта из веб-приложения в виде изображения. Создание PDF-отчётов или страниц для печати из отрисованного содержимого страницы. Экспорт редактируемой векторной графики или вставка дизайнов в Figma. Предоставление AI-агентам текстового или графического представления содержимого страницы.
Как установить snapdom?
Установите основной пакет с помощью npm: npm i @zumer/snapdom Импортируйте snapdom и экспортируйте элемент в PNG
Где скачать snapdom?
Исходный код и инструкции по установке — на GitHub: https://github.com/zumerlab/snapdom

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты