Объединитель изображений для светлой и тёмной темы — один PNG для белого и чёрного фона
Объедините изображение для светлой темы и изображение для тёмной темы в один прозрачный PNG: на белом фоне виден светлый рисунок, на чёрном — тёмный. Загрузите оба файла, посмотрите результат в предпросмотре рядом и скачайте один адаптивный к теме ресурс для документации, README или интерфейса — всё в браузере.
Что делает объединитель изображений для светлой и тёмной темы
Один PNG, два вида
Результат — попиксельная альфа-композиция: на белой поверхности он выглядит как светлое изображение, на чёрной — как тёмное. Благодаря этому README, страница документации или интерфейс обходятся одним ресурсом вместо двух файлов или media query.
Два поля загрузки с живым предпросмотром
Выберите изображение для светлой темы и изображение для тёмной темы; объединённый PNG появляется сразу после загрузки обоих — один раз на белой карточке и один раз на чёрной, чтобы оценить обе темы до скачивания.
Фиксированный экспорт PNG
Скачивается всегда PNG с именем light-dark-image.png, созданный через canvas.toDataURL. Экспорта в JPEG, WebP или SVG нет, как и настроек качества или сжатия.
Canvas по размеру большего изображения
Результат использует большую ширину и большую высоту из пары, а оба исходных изображения растягиваются на этот canvas от левого верхнего угла. Разные пропорции искажаются, а не дополняются полями или обрезаются.
Локально и без регуляторов
Файлы читаются через FileReader и объединяются на canvas — ничего не загружается. Нет регуляторов яркости, контраста, размера, положения, фона или формата; единственные входные данные — два изображения.
Частые вопросы об изображениях для светлой и тёмной темы
Для чего на самом деле нужен этот инструмент?
Он превращает рисунок для светлой темы и рисунок для тёмной темы в один прозрачный PNG, вид которого зависит от фона: белые поверхности показывают светлую версию, чёрные — тёмную. Он предназначен для адаптивных к теме ресурсов в README, документации и интерфейсах, а не для создания двух отдельных изображений.
Какие настройки можно менять?
Только два исходных изображения. Нет регуляторов яркости, контраста, цвета, положения, масштаба, цвета фона, формата или качества, а также тонкой настройки самого объединения; панели предпросмотра только показывают результат.
Какие входные и выходные форматы поддерживаются?
Вход принимает image/* и использует декодер браузера, поэтому работают JPEG, PNG, WebP и GIF; выход всегда PNG. Экспорт в JPEG, WebP или SVG не предлагается.
Можно ли обработать несколько пар за раз?
Нет. Каждое поле берёт только первый выбранный файл, и страница обрабатывает одну пару светлое/тёмное за раз — без очереди, пакетного режима и истории.
Есть ли ограничения по размеру и что будет при разных размерах?
Явного ограничения по пикселям, кроме доступной памяти canvas в браузере, нет. Размер результата — max(ширина) × max(высота), и оба изображения растягиваются до этого размера от левого верхнего угла, поэтому разные пропорции искажаются, а не дополняются полями или обрезаются.
Всё выполняется локально?
Да. Изображения декодируются через FileReader и объединяются на canvas в браузере; ничего не загружается и сервер не участвует. Результат хранится в памяти как data URL, пока вы его не скачаете.
Насколько точен результат?
Это приближение. Светлые каналы пересчитываются в диапазон 128–255, тёмные — в 0–127, затем альфа и цвет решаются так, чтобы пара корректно объединялась на чистом белом и чистом чёрном; цвета квантуются, при экстремальном контрасте могут теряться детали, а формула точна только на чисто белом или чёрном фоне (серые и цветные поверхности смешиваются иначе). Прозрачность берётся только из альфы светлого изображения, и если изображения нарушают допущение о яркости, альфа пикселя прижимается к нулю.
