Код в изображение
Вставьте фрагмент кода, выберите одну из четырех встроенных тем, настройте цвета, размер шрифта, отступы, необязательный заголовок и номера строк, затем скачайте PNG, отрисованный на canvas в браузере. Инструмент рисует обычный текст: он подходит для аккуратных изображений с кодом, но не анализирует языки и не добавляет подсветку синтаксиса.
Как создать PNG с кодом
-
1
Вставьте фрагмент
Используйте поле кода для JavaScript, HTML, CSS, JSON, shell-команд или любого другого обычного текста. Рендерер берет не больше первых 400 строк.
-
2
Настройте внешний вид
Выберите Темную, Светлую, Dracula или Solarized, затем настройте заголовок, размер шрифта, отступы, фон, текст и акцентный цвет.
-
3
Проверьте canvas
Браузер рисует каждую строку как текст canvas, при необходимости с оконным заголовком и номерами строк. Длинные строки могут расширить canvas до встроенного максимума.
-
4
Скачайте PNG
Экспортируйте текущий canvas как PNG-изображение для документации, заметок, слайдов или публикаций. Экспорт SVG, JPEG и HTML не предусмотрен.
Что делает рендерер
| Настройка | Что можно изменить | Примечания |
|---|---|---|
| Тема | Темная, Светлая, Dracula, Solarized | Каждая тема задает начальные цвета фона, текста и акцента. |
| Стиль текста | Заголовок, размер шрифта, отступы | Размер шрифта ограничен 10–40 px, отступы, 20–200 px. |
| Цвета | Фон, текст, акцент | Акцентный цвет используется для номеров строк. |
| Заголовок | Оконный заголовок включен или выключен | Название отображается в заголовке, если он включен. |
| Номера строк | Показать или скрыть | Номера рисуются как обычный текст canvas. |
| Экспорт | Скачать PNG | Кнопка скачивания сохраняет текущий canvas как PNG-изображение. |
Практические ограничения
- Браузер рисует фрагмент как обычный текст с помощью Canvas API. Он не распознает JavaScript, Python, HTML или другие языки.
- Предпросмотр использует первые 400 строк, чтобы очень большие файлы не блокировали страницу.
- Ширина canvas удерживается в диапазоне от 420 px до 2200 px. Очень длинные строки могут достичь максимальной ширины.
- Двухшаговая версия хранит введенные данные в
sessionStorageдля текущей вкладки браузера, пока вы переходите от редактирования к скачиванию.
Доступность
Код внутри изображения нельзя искать, копировать или читать средствами экранного доступа. Используйте PNG как визуальное дополнение, а настоящий фрагмент в документации, уроках и отчетах об ошибках оставляйте рядом в виде выделяемого текста.
Часто задаваемые вопросы
Нет. Он рисует на canvas ровно тот текст, который вы вставили. Цвета и темы можно менять, но выбора языка и синтаксического анализатора нет.
В меню есть Темная, Светлая, Dracula и Solarized. После выбора темы можно отдельно изменить фон, текст и акцентный цвет.
Нет. На выходе только скачивание PNG, созданного из canvas. Экспорта SVG, JPEG и копирования как HTML нет.
Предпросмотр рисует первые 400 строк, чтобы браузер оставался отзывчивым. Для опубликованных изображений обычно лучше оставить несколько строк, которые объясняют идею.
Сопутствующие инструменты
Справочная таблица ASCII
Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.
Справочник сочетаний клавиш
Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.
Справочник символов HTML
Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.
Счетчик FPS
Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.
Генератор цветовой палитры
Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.
Генератор случайных букв
Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.