HTML в картинку — HTML и CSS в PNG
Отрисовывает вставленный HTML и CSS и сохраняет PNG с выбранной шириной и масштабом
Работает в браузере · файлы никуда не загружаются
Вставьте фрагмент (<div>…) или целый документ (<html>…). Для целого документа используются только содержимое <body> и блоки <style>.
Дополнительные стили. Блоки <style> внутри HTML тоже применяются.
Содержимое верстается по этой ширине (px) и снимается на всю высоту. От 100 до 4000.
2× — чётко, как на retina-экране, 3× — для печати. Число пикселей растёт пропорционально квадрату масштаба.
Ради безопасности и конфиденциальности изображения, шрифты и CSS по любым адресам, кроме data: и blob:, не запрашиваются ни в предпросмотре, ни при съёмке, а скрипты не выполняются. Текст рисуется шрифтами, установленными на вашем устройстве.
Предпросмотр
Введите HTML, чтобы увидеть предпросмотр.
Что делает инструмент
Инструмент сохраняет фрагмент HTML и CSS — карточку, объявление, таблицу, кнопку или баннер для рассылки — как изображение PNG. Он пригодится, чтобы показать результат вёрстки в документации или статье блога, собрать карточку-объявление для соцсетей прямо в коде или поделиться частью дизайна картинкой. В отличие от обрезанного скриншота, вы получаете точную ширину и масштаб.
Как пользоваться
- Вставьте код в поле HTML: целый документ (
<html>…) или только фрагмент. Впервые здесь? Нажмите Вставить пример. - При желании добавьте стили в поле CSS. Блоки
<style>внутри HTML тоже применяются. - Задайте Ширину снимка (px), Масштаб (1×, 2×, 3×) и Фон (белый или прозрачный).
- Проверьте предпросмотр, нажмите Создать PNG, затем Сохранить PNG.
Как это работает
- Безопасный предпросмотр: код рисуется в изолированном iframe (sandbox). Песочница не даёт выполняться скриптам, а политика Content Security Policy блокирует все сетевые запросы, кроме адресов data: и blob:.
- Удаление внешних адресов: вставленный код сначала разбирается встроенными парсерами HTML и CSS браузера (на этом шаге ничего не загружается). Все адреса, кроме data: и blob:, в src, srcset, poster, href в SVG, атрибутах style,
<style>, url(), image-set(), @import и @font-face удаляются и перечисляются для вас. Перед самым снимком предпросмотр проверяется ещё раз, а во время снимка читаются только адреса data: и blob:, так что ни один запрос не уходит наружу. Ссылки (<a href>) на картинку не влияют, поэтому в списке не показываются; они изменяются так, чтобы щелчок по ним никуда не вёл. - Размер снимка: содержимое верстается по выбранной ширине и снимается на его реальную высоту. Размер PNG — ширина × масштаб на высоту × масштаб.
- Ограничение размера: если результат больше, чем браузер может обработать (16 777 216 пикселей на iPhone и iPad, 16 384 px по стороне), масштаб снижается автоматически, и страница сообщает об этом.
- Целые документы: используются только содержимое
<body>и все блоки<style>; остальные теги<head>отбрасываются. - Снимок создаётся библиотекой html-to-image (лицензия MIT).
Примеры
| Ввод | Настройки | Результат |
|---|---|---|
| Пример с карточкой объявления | Ширина 800, 2× | PNG шириной 1600 px |
<table> с CSS |
Ширина 600, 3×, прозрачный | PNG шириной 1800 px с прозрачным фоном |
| Код с внешним изображением | Ширина 800, 1× | Внешнее изображение остаётся пустым, заблокированные адреса перечислены |
Для векторных рисунков воспользуйтесь конвертером SVG в PNG, а для Markdown — предпросмотром Markdown.
Частые вопросы
Можно ли сделать снимок сайта по ссылке?
Нет. Для снимка чужого сайта нужен сервер, который откроет страницу за вас, а этот инструмент так не делает. Вставьте HTML и CSS, которые написали сами или скопировали из инструментов разработчика браузера.
Пропали изображения.
Ради безопасности и конфиденциальности изображения, шрифты и CSS по любым адресам, кроме data: и blob: (http, https, // и относительные пути), не загружаются. Адреса, спрятанные за символьными ссылками HTML или экранированием CSS, проверяются так, как их расшифрует браузер, поэтому тоже блокируются. Инструмент перечисляет заблокированные адреса; встройте изображения как адреса data: (Base64), и они появятся. Создать такие адреса поможет инструмент «Изображение в Base64».
Шрифт выглядит не так, как в макете.
Файлы веб-шрифтов не загружаются, поэтому текст выводится шрифтами, установленными на вашем устройстве. Если указанного шрифта нет, используется системный по умолчанию (например, Segoe UI в Windows, San Francisco на устройствах Apple).
Появится ли содержимое, которое создаёт JavaScript?
Нет. Скрипты во вставленном коде не выполняются; рисуются только статические HTML и CSS.
Мой код отправляется на сервер?
Нет. И предпросмотр, и изображение создаются в вашем браузере.
