Генератор изображений-заполнителей

Как это работает

Предпросмотр — это не имитация вашего изображения, это и есть изображение: элемент canvas точного пиксельного размера, заполненный и подписанный через 2D-API рисования, затем закодированный напрямую в PNG, JPG или WebP с помощью canvas.toBlob. Размер шрифта подписи масштабируется по короткой стороне (примерно её восьмая часть, с минимумом в 12px), поэтому текст остаётся пропорциональным, генерируете ли вы миниатюру 64px или баннер 4000px. В режиме фото загруженное изображение вписывается по принципу «cover» — масштабируется для заполнения и обрезается по центру, точно как object-fit: cover в CSS, а подпись получает полупрозрачную тёмную подложку, чтобы оставаться читаемой поверх насыщенного деталями изображения.

Перерисовка синхронна при каждом нажатии клавиши; лишь более тяжёлое кодирование blob немного отложено, поэтому показатель размера отстаёт от предпросмотра на мгновение. Стоит учитывать: плейсхолдеры сплошного цвета сжимаются невероятно эффективно. Сплошной PNG размером 4000×4000 часто весит меньше 40 КБ, потому что DEFLATE сжимает одинаковые строки почти до нуля. Это отлично для быстрых макетов, но вводит в заблуждение, если вы тестируете производительность загрузки, поскольку настоящая фотография такого размера была бы в сто раз тяжелее. Для честного веса используйте режим фонового фото или сочетайте этот инструмент с генератором тестовых файлов, чтобы довести размер до реалистичного числа байт.

Рисование, кодирование и скачивание происходят полностью внутри этой вкладки, включая любое переданное фото, которое читается через object URL и никогда не покидает память. Откройте инструменты разработчика и понаблюдайте за вкладкой «Сеть» во время генерации: ни один запрос не передаёт ваше изображение.