Фильтры для изображений

Фильтры изображений работают, преобразуя цвет каждого пикселя в реальном времени. Каждый фильтр применяет небольшую математическую операцию к красному, зелёному и синему каналам каждого пикселя: brightness(150%) умножает их на 1,5 для осветления изображения, grayscale(100%) усредняет их до единого серого тона, а blur(4px) смешивает каждый пиксель с соседями с помощью ядра свёртки. Поскольку это выполняется на GPU через HTML Canvas API, предпросмотр обновляется мгновенно при перемещении ползунка — без ожидания, без загрузки, без обращения к серверу.

Есть две большие группы. Фильтры коррекции изменяют тон и цвет, сохраняя естественный вид фото — яркость, контраст, насыщенность и поворот оттенка относятся сюда. Эффектные фильтры переосмысливают изображение в особый образ — оттенки серого (чёрно-белое), сепия (тёплый винтаж), инверсия (негатив), размытие (мягкий фокус) и прозрачность. Этот редактор предоставляет все девять CSS-функций фильтров. Накладывание их — например, grayscale(100%) с contrast(120%) — именно так строятся именованные пресеты Vintage, Noir и Выцветший.

Перетащите фото в поле выше (или нажмите для поиска, или вставьте с помощью Ctrl/Cmd+V), затем нажмите эскиз пресета или перетащите ползунки настройки. Предпросмотр обновляется в реальном времени, а ручка сравнения до/после позволяет в любой момент сравнить с оригиналом. Когда результат понравится, нажмите «Скачать PNG» или «Скачать JPG» для сохранения в полном разрешении. Ничего не загружается — каждый шаг выполняется в вашем браузере.

Свойство CSS filter применяет графические эффекты к любому HTML-элементу с помощью цепочки функций фильтров: brightness(), contrast(), saturate(), grayscale(), sepia(), hue-rotate(), invert(), blur() и opacity(). Например, filter: contrast(120%) saturate(140%) sepia(15%); создаёт выразительный, слегка тёплый образ. Этот инструмент строит именно такую строку по мере перемещения ползунков, чтобы вы могли скопировать её прямо в таблицу стилей и применить к любому img, div, video или SVG.

Фильтры в стиле Instagram — это предустановленные комбинации базовых CSS-функций фильтров. Образ в стиле Clarendon — примерно contrast(120%) saturate(135%), выцветший плёночный вид использует contrast(85%) brightness(110%) sepia(12%), а насыщенный тон Vivid накладывает contrast(130%) saturate(160%). Нажмите на любой эскиз пресета в галерее, чтобы мгновенно применить его к фотографии, затем настройте отдельные ползунки для дальнейшей доработки. Те же визуальные результаты, что у платных редакторов VSCO или пресетов Lightroom — без приложения, без подписки, без загрузки.

Для чёрно-белого установите оттенки серого на 100% — пресет Ч/Б делает это за один клик, а Нуар добавляет дополнительный контраст для драматичного эффекта. Для сепии поднимите ползунок сепии; sepia(80%) даёт классический коричневатый тон. Для винтажного вида объедините их: пресет Vintage использует sepia(55%) contrast(108%) brightness(104%) saturate(120%) для тёплого, слегка выцветшего ощущения плёнки. Canva и Adobe Express умеют похожее, но требуют входа в аккаунт. Здесь всё работает в вашем браузере — без аккаунта, без загрузки, без ожидания.

Это зависит от инструмента. Многие онлайн-редакторы — Fotor, LunaPI, Pixlr — загружают ваше фото на свои серверы для обработки, то есть ваше изображение хранится на чужой машине и может быть сохранено для аналитики или обучения моделей. Фильтр изображений UtiloKit работает полностью на HTML-холсте в вашем браузере: ваше изображение читается локально, обрабатывается локально и скачивается локально — оно никогда не загружается, никогда не хранится и никем, кроме вас, не просматривается.