Это четвертая статья из серии о фильтрах SVG, в которой Сара Суэйдан покажет вам, как их использовать.
feComponentTransfer для создания эффекта двухцветного фильтра.
Предлагаемая серия статей «Эффекты фильтрации SVG» Сары Суейдан, внештатного разработчика пользовательского интерфейса и технического писателя из Ливана, посвящена тому, как работают фильтры SVG, и состоит из следующих статей:
Эффекты фильтров SVG
- Эффекты фильтрации SVG. Часть 1. Фильтры SVG 101
- Эффекты фильтрации SVG. Часть 2. Обрисовываем текст с помощью feМорфология
- Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения с помощью feComponentTransfer
- Эффекты фильтрации SVG. Часть 4. Использование двухцветных изображений feComponentTransfer .
- Эффекты SVG-фильтра: соответствие текста текстуре поверхности с помощью feDisplacementMap
В предыдущей статье этой серии я познакомил вас с примитивом.
feComponentTransfer и мы использовали его, чтобы ограничить количество цветов в изображении и создать эффект постеризации.
В этой статье мы рассмотрим, как этот примитив можно использовать для создания эффекта.
дуотон , аналог Фотошопа.
Мы также научимся использовать его для управления интенсивностью и контрастностью цветов изображения.
Краткий обзор
Давайте немного повторим.Примитивный feComponentTransfer позволяет изменить каждый из компонентов R, G, B и A, присутствующих в пикселе.
Другими словами, feComponentTransfer обеспечивает независимое манипулирование каждым цветовым каналом, а также альфа-каналом в элементе.
вход .
Компоненты РГБА изменяются путем выполнения различных функций над этими компонентами.
Для этого у каждого компонента есть свой элемент. Эти составные элементы вложены в feComponentTransfer .
Для RGBA это составные элементы feFuncR , feFuncG , feFuncB , И feFuncA .
Атрибут тип используется в элементе компонента для определения типа функции, которую следует использовать для изменения этого компонента.
На данный момент доступно пять типов функций: личность , стол , дискретный , линейный И гамма .
Эти типы функций используются для изменения компонентов RGBA (цвет и альфа) источника графики.
Мы упоминали, что вы можете изменить один или несколько компонентов одновременно и что вы можете менять каналы независимо, применяя разные функции к каждому элементу компонента.
В предыдущей статье мы разъяснили функцию дискретный и увидел, как его можно использовать для постеризации изображений.<feComponentTransfer> <!-- The RED component --> <feFuncR type="identity | table | discrete | linear | gamma"></feFuncR> <!-- The GREEN component --> <feFuncG type="identity | table | discrete | linear | gamma"></feFuncG> <!-- The BLUE component --> <feFuncB type="identity | table | discrete | linear | gamma"></feFuncB> <!-- The ALPHA component --> <feFuncA type="identity | table | discrete | linear | gamma"></feFuncA> </feComponentTransfer>">
В этой статье мы начнем с использования функции стол чтобы создать эффект двухцветного изображения, аналогичный тому, который можно создать в Photoshop.
Создание двухцветного эффекта в Photoshop
Я не дизайнер и не разбираюсь в графических редакторах типа фотошоп .Когда я хотел создать двухцветный эффект в SVG, я сначала искал способ создать эффект в графическом редакторе, чтобы посмотреть, смогу ли я воспроизвести его, используя операции фильтрации, доступные в SVG. Как оказалось, шаги по созданию двухцветных изображений в SVG точно такие же, как и в Photoshop. Следующее видео является ускоренной версией.
этот урок , который я нашел на YouTube. В этом видео дизайнер создает двухцветный эффект, выполнив следующие действия:
- Обесцветьте изображение до оттенков серого.
- Сопоставьте диапазон оттенков серого с новым диапазоном, который вместо черного и белого имеет два разных цвета на обоих концах, которые вы хотите использовать для создания двухцветного эффекта.
Другими словами, вам необходимо создать и использовать карту градиента, на которую будут отображаться оттенки серого.
Создание двухцветного эффекта в SVG
Чтобы воссоздать этот эффект в SVG, нам нужно сначала обесцветить изображение.Это можно сделать с помощью примитива фильтра feColorMatrix .
Далее нам нужно иметь возможность создать и передать карту градиента в браузер для отображения нового изображения в оттенках серого.
Преобразуйте изображение в оттенки серого с помощью feColorMatrix.
Используя feColorMatrix вы можете определить цветовую матрицу, которая определяет количество красного, зеленого и синего в вашем изображении.
Предоставляя равное количество этих трех компонентов, мы создаем матрицу, которая преобразует наше изображение в версию самого себя в оттенках серого: <svg viewBox="0 0 266 400">
<filter id="duotone">
<feColorMatrix type="matrix" values=".
33 .
33 .
33 0 0 .
33 .
33 .
33 0 0 .
33 .
33 .
33 0 0 0 0 0 1 0"> </feColorMatrix> <!-- .
--> </filter> <image xlink:href=".
" width="100%" x="0" y="0" height="100%"
filter="url(#duotone)"></image>
</svg>
На следующем изображении изображение справа является результатом применения вышеуказанного фильтра к изображению слева: 
Рисунок 1. Результат (справа) преобразования изображения слева в оттенки серого с помощью операции фильтра.
feColorMatrix .
Вы можете узнать все о feColorMatrix и как его использовать в Эта статья Уна Кравец.
Теперь, когда наше изображение по сути представляет собой серый градиент, нам нужно создать двухцветную карту градиента для отображения серого градиента.
Создание карты градиента с использованием функции переноса компонентов таблицы
В SVG вы можете использовать примитив feComponentTransfer с таблицей типов для создания карты градиента.В предыдущая статья мы увидели, как можно сопоставить цвета изображения со списком цветов, указанным в атрибуте.
таблицаЗначения используя функцию дискретный .
Браузер использует наш список таблицаЗначения для создания диапазонов, которые затем используются для сопоставления цветов с предоставленными нами значениями.
При использовании функции стол мы также предоставим значения цвета в атрибуте таблицаЗначения .
И снова браузер будет использовать эти значения для сопоставления цветов изображения.
Однако разница заключается в том, как браузер будет отображать эти цвета.
Вместо сопоставления цветовых диапазонов с дискретным значением цвета он создаст цветовой диапазон из предоставленных значений, а затем сопоставит входной диапазон с этим новым диапазоном.
Допустим, мы хотим использовать два цвета для нашего двухцветного эффекта: 
Рис_2. Оригинальные два цвета.
Эти два цвета будут использоваться для создания градиентного отображения: 
Рис_3. Градиент, созданный из двух значений цвета.
.
с которым мы собираемся сопоставить нашу карту в оттенках серого.
Рис_4. Отображение двухцветной карты в двухцветном градиенте.
Чтобы использовать эти цвета в feComponentTransfer , нам нужно получить значения каналов R, G и B каждого цвета.
Поскольку таблицаЗначения содержит дробные значения, нам необходимо преобразовать значения RGB в дробные значения.
Значения цвета обычно находятся в диапазоне [0,255].
Чтобы преобразовать их в дроби, разделите их на 255. Например, розовый цвет имеет следующие значения RGB: R: 254
G: 32
B: 141
Преобразовав их в дробь, получим: R: 254/255 = .
996078431 G: 32/255 = .
125490196 B: 141/255 = .
552941176
Аналогично для значений желтого цвета получаем: R: .
984313725 G: .
941176471 B: .
478431373
Теперь, когда у нас есть значения цвета, пришло время создать карту градиента.
Ранее мы упоминали, что когда мы предоставляем значения таблицаЗначения для использования в функции стол , браузер будет использовать таблицаЗначения чтобы создать диапазон.
Итак, начнем с предоставления значений RGB двух цветов в качестве значений RGB для составляющих элементов: <feComponentTransfer color-interpolation-filters="sRGB">
<feFuncR type="table" tableValues=".
996078431 .
984313725"></feFuncR> <feFuncG type="table" tableValues=".
125490196 .
941176471"></feFuncG> <feFuncB type="table" tableValues=".
552941176 .
478431373"></feFuncB>
</feComponentTransfer>
В предыдущей статье мы видели, что при использовании функции дискретный браузер создает н диапазоны для н ценности в таблицаЗначения .
Когда мы используем функцию стол , браузер создает n-1 диапазон для н ценности.
Потому что мы предоставили два таблицаЗначения для каждого компонента это означает, что мы получим один диапазон ([розовый, желтый]) для каждого.
Сейчас feComponentTransfer сделает свое дело: браузер будет последовательно просматривать каждый пиксель источника изображения.
Для каждого пикселя он получит значение красного, зеленого и синего компонентов.
Поскольку наше изображение имеет оттенки серого, значения R/G/B будут находиться в диапазоне [0, 1] = [черный, белый] (0 — полностью черный, 1 — полностью белый и оттенки серого между ними).
Затем значение каждого компонента будет сравниваться с новым диапазоном, указанным в таблицаЗначения .
Так:
- значение красного компонента будет сопоставлено с диапазоном [.
996078431,.
984313725];
- значение синего компонента будет сопоставлено с диапазоном [.
125490196,.
941176471];
- зеленое значение компонента будет сопоставлено с диапазоном [.
552941176,.
478431373].
В результате изображение станет двухцветным.
Рис_6. Результат (справа) сопоставления изображения в оттенках серого (слева) с нашей картой градиента.
Наш полный код теперь выглядит так: <svg viewBox="0 0 266 400">
<filter id="duotone">
<!-- Grab the SourceGraphic (implicit) and convert it to grayscale -->
<feColorMatrix type="matrix" values=".
33 .
33 .
33 0 0 .
33 .
33 .
33 0 0 .
33 .
33 .
33 0 0 0 0 0 1 0"> </feColorMatrix> <!-- Map the grayscale result to the gradient map provided in tableValues --> <feComponentTransfer color-interpolation-filters="sRGB"> <feFuncR type="table" tableValues=".
996078431 .
984313725"></feFuncR> <feFuncG type="table" tableValues=".
125490196 .
941176471"></feFuncG> <feFuncB type="table" tableValues=".
552941176 .
478431373"></feFuncB> </feComponentTransfer> </filter> <image xlink:href=".
" width="100%" x="0" y="0" height="100%"
filter="url(#duotone)"></image>
</svg>
Вы можете поиграть с демо здесь: Вы можете пойти дальше и вместо предоставления только двух значений цвета для карты градиента указать три значения цвета в таблицаЗначения , создавая карту градиента с тремя цветами вместо двух.
Управляйте контрастностью и интенсивностью цвета с помощью функции гамма-передачи
Использование функции переноса компонента гамма мы можем выполнить гамма-коррекцию нашего графического источника.Гамма-коррекция — это функция управления уровнем освещенности изображения.
Функция гамма имеет три атрибута, которые позволяют управлять функцией гамма-коррекции, которая будет использоваться для управления освещением: амплитуда, показатель степени и смещение.
Вместе они составляют следующую передаточную функцию: C' = amplitude * pow(C, exponent) + offset
гамма можно использовать для управления общим контрастом изображения.
Увеличение атрибута показатель степени делает темные области темнее при увеличении атрибута амплитуда Делает светлые участки более сияющими.
Это, в свою очередь, увеличивает общую контрастность изображения.
Атрибут компенсировать используется для увеличения интенсивности каждого компонента, а также влияет на общее изображение: как на светлые, так и на темные участки.
Настройка контрастности как темных, так и светлых областей изображения иногда может оказаться полезной, если вы не получаете того количества «блеска», которое хотели бы видеть на изображении.
Например, если вы примените фильтр дуотон от предыдущего участка к следующему изображению результат будет не таким «живым», как хотелось бы: 
Рис_7. Результат работы двухтонового фильтра.
Двухцветное изображение справа выглядит немного размытым, а цвета слегка размытыми.
Я хочу добавить контраст, чтобы он выглядел более живым.
Давайте немного увеличим амплитуда И показатель степени : <feComponentTransfer color-interpolation-filters="sRGB">
<feFuncR type="gamma" exponent="1.5" amplitude="1.3" offset="0"></feFuncR>
<feFuncG type="gamma" exponent="1.5" amplitude="1.3" offset="0"></feFuncG>
<feFuncB type="gamma" exponent="1.5" amplitude="1.3" offset="0"></feFuncB>
</feComponentTransfer>
Мне удалось сделать светлые области более яркими, а темные — более насыщенными: 
Рис_8. Результат гамма-коррекции.
Конечно, это всего лишь пример.
Вы можете предпочесть выцветшую версию изображения, особенно чтобы она выглядела лучше с текстом сверху.
Я думаю, что гамма-коррекция наиболее полезна для управления контрастом черно-белых изображений.
Если я применю ту же операцию гамма-коррекции к версии изображения в оттенках серого, я получу более благоприятное изображение: 
Рис_9. Результат гамма-коррекции изображения в оттенках серого.
Конечно, можно поступить наоборот и вместо увеличения контраста немного осветлить темные участки.
В этом случае вам следует уменьшить значения атрибутов.
амплитуда и/или показатель степени , а не увеличивать их.
Значение по умолчанию для обоих — 1. Значение атрибута по умолчанию компенсировать равно 0. Поиграйтесь со значениями функций гамма в следующей демонстрации, чтобы лучше понять, как они влияют на яркость и контрастность изображения:
Инструмент карты градиента SVG
Йоксель некоторое время играл с SVG-фильтрами и недавно создал фантастический визуальный инструмент , который позволяет загружать изображение и применять разнообразные двух- и даже трехцветные эффекты, а также генерирует для вас код SVG-фильтра, готовый для копирования и вставки куда угодно.Это отличный инструмент для дальнейшего изучения.
feComponentTransfer .
Рис_10. Инструмент SVG-фильтра Карта градиента из Йокселя.
Инструмент даже позволяет настроить эффект оттенков серого, созданный с помощью feColorMatrix .
В нашем коде мы использовали равное количество каналов R, G и B для достижения эффекта оттенков серого.
Это один из способов создания изображения в оттенках серого.
Но есть и другие способы.
Например, вы можете создать эффект оттенков серого для каждого канала, что приведет к получению разных результатов в оттенках серого для каждого канала:
Рис_11. Результат создания изображения в оттенках серого другими методами.
Я рекомендую немного поиграть с этим инструментом и проверить, как выбор эффектов меняет базовый код, поскольку это один из лучших способов узнать больше о фильтрах SVG.
Заключение
Примитивный feComponentTransfer дает нам полный контроль над цветом и альфа-компонентами наших изображений и позволяет создавать эффекты уровня Photoshop, не выходя из наших редакторов кода.В следующей статье этой серии мы рассмотрим еще несколько примитивов, которые позволят нам воспроизвести другой эффект Photoshop, используя почти те же шаги, что и в Photoshop, и еще раз покажем, как SVG может перенести возможности редакторов изображений в Интернет. Платформа.
Мы научимся смешивать текст с цветом и текстурой фонового изображения для получения привлекательных результатов.
Оставайтесь с нами.
Теги: #CSS #веб-дизайн #svg
-
Ментальность (Ментальность)
19 Oct, 24 -
Вирус-Шифратор. Большая Статья
19 Oct, 24 -
Шоу Uxtra – Эпизод 1: Интерфейсы Мечты
19 Oct, 24 -
Как Уменьшить Размер Таблиц В Системе Sap
19 Oct, 24 -
Сделайте Это С Помощью Go Graphql Api
19 Oct, 24 -
Движение Против Спамеров.
19 Oct, 24 -
Как Остановить Анимированный Gif В Браузере
19 Oct, 24
