Инструмент преобразования в оттенки серого

Преобразование изображения в оттенки серого удаляет цветовую информацию и оставляет только черный, белый и серые тона. Хороший результат не равен простому среднему красного, зеленого и синего каналов; часто применяется взвешенная формула R×0.299 + G×0.587 + B×0.114, потому что человеческое зрение сильнее воспринимает зеленый, чем синий. Так лучше сохраняются видимая яркость, контраст и детали. Градации серого полезны для черно-белой фотографии, сканов документов, подготовки фото на документы, проверки печати, винтажного дизайна и анализа изображений. Для цветовых графиков, карт и интерфейсов нужно проверять, не потерялся ли смысл. Перед публикацией или отправкой нужно открыть результат и проверить читаемость, crop, resolution, порядок и отсутствующие элементы.

Преобразование изображения в оттенки серого трансформирует каждый пиксель из цветового пространства RGB в единственное значение яркости, представляющее воспринимаемую освещённость. Этот инструмент использует метод яркости (также называемый методом взвешенного среднего), определённый стандартом ITU-R BT.601 для стандартной чёткости телевидения: Gray = R × 0.299 + G × 0.587 + B × 0.114. Эти коэффициенты отражают чувствительность зрительной системы человека — колбочки сетчатки примерно на 64% чувствительны к красному (L-колбочки), на 32% к зелёному (M-колбочки) и на 2% к синему (S-колбочки), а веса приближают вклад каждого канала в воспринимаемую яркость. Зелёный доминирует на 58.7%, потому что человеческое зрение наиболее остро в зелёно-жёлтой области спектра (~555 нм). Для сравнения, другие распространённые методы дают разные результаты. Метод среднего (Gray = (R + G + B) / 3) относится ко всем каналам одинаково и даёт неестественно тёмные красные и неестественно яркие синие тона. Метод десатурации в цветовом пространстве HSL/HSV обнуляет насыщенность, что перцептивно точнее среднего, но менее точно взвешенной яркости. Метод Luma из ITU-R BT.709 (стандарт HDTV) использует несколько другие коэффициенты (0.2126, 0.7152, 0.0722), более точные для современных дисплеев с другим белым тоном. Коэффициенты BT.601, используемые здесь, остаются наиболее широко реализованными и дают естественно выглядящие результаты для самого широкого диапазона входных изображений. Конвейер обработки работает полностью в браузере. Загруженное изображение декодируется нативным декодером браузера (поддержка JPEG, PNG, WebP, BMP и GIF) в HTMLImageElement. Изображение отрисовывается на элементе Canvas через ctx.drawImage(), что запускает ускоренный GPU-композитор браузера для преобразования цветового пространства и масштабирования. getImageData() считывает необработанный буфер RGBA-пикселей как Uint8ClampedArray — каждый пиксель занимает 4 последовательных байта (R, G, B, A), поэтому длина массива равна ширина × высота × 4. Цикл градаций серого итерирует с шагом 4 (i += 4), вычисляет взвешенную сумму и записывает одно и то же значение серого во все три канала RGB, сохраняя исходный альфа-канал. putImageData() записывает изменённый буфер обратно на холст. Наконец, canvas.toBlob('image/png') кодирует результат как безпотерьный PNG, а URL.createObjectURL() создаёт blob: URL для ссылки скачивания. Для пакетной обработки каждое изображение обрабатывается последовательно, чтобы не перегружать основной поток — цикл ожидает каждый промис конвертации перед запуском следующего. Canvas переиспользуется между изображениями, а не пересоздаётся, избегая перераспределения GPU-текстур. Исходные объекты File сохраняются рядом с Blob-ами оттенков серого, чтобы имя файла для скачивания можно было получить из оригинала с добавлением '_grayscale'.

• Коэффициенты яркости ITU-R BT.601: R × 0.299 + G × 0.587 + B × 0.114 — выведены из функции фотопической светлоты стандартного наблюдателя CIE 1931, эти веса моделируют распределение колбочек сетчатки человека (L:M:S ≈ 64:32:2) и пиковую чувствительность на 555 нм (зелёно-жёлтый).
• Сравнение методов: среднее (R+G+B)/3 даёт тёмные красные и яркие синие тона; десатурация (HSL S=0) лучше, но не перцептивно равномерна; BT.709 Luma (0.2126R + 0.7152G + 0.0722B) точнее для дисплеев HDTV, но веса BT.601, используемые здесь, наиболее широко поддерживаются браузерами и инструментами обработки изображений.
• Конвейер пикселей Canvas: drawImage() → GPU-композитор декодирует и масштабирует → getImageData() читает RGBA Uint8ClampedArray → цикл взвешенной суммы по пикселям (шаг 4, i += 4) → putImageData() записывает обратно → toBlob('image/png') кодирует как безпотерьный PNG → createObjectURL() для скачивания.
• Сохранение альфа-канала: байт альфа-канала (индекс i+3) считывается, но не изменяется — прозрачные пиксели остаются прозрачными, а исходные значения альфа проходят без изменений, что важно для PNG-изображений с прозрачностью или сглаженными краями.
• Последовательная пакетная обработка: каждое изображение обрабатывается по одному через await, чтобы не перегружать основной поток — элемент canvas переиспользуется между изображениями, а объекты File сохраняются, чтобы имена файлов для скачивания можно было получить из оригинальных с добавлением '_grayscale'.
• Учёт гаммы: коэффициенты BT.601 применяются к гамма-кодированным значениям sRGB, а не к линейным интенсивностям света — это стандартный подход и даёт визуально корректные результаты для отображения, но приложениям, требующим физических измерений света (научная визуализация, фотометрия), следует сначала линеаризовать значения sRGB.
• Управление памятью: каждый Blob оттенков серого хранится в памяти через object URL до удаления изображения или закрытия страницы — вызов URL.revokeObjectURL() при удалении предотвращает утечки памяти, а память Blob освобождается, когда не остаётся ссылок.