D3.JS: Дискретный фильтр для обработки изображений - PullRequest
0 голосов
/ 19 июня 2019

У меня есть произвольный растровый шаблон, где синий цвет равен -1,0, белый - 0,0, а оранжевый - 1,0 (левое изображение).Нужно разработать SVG-фильтр, похожий на этот справочник С серым изображением в D3js ), но для дискретизации (правое изображение).

enter image description here

В конце концов, значения для всех трех цветов известны.

Я уверен, что в основном мне нужно пройти через каждый пиксель ивычислите расстояние до синего и оранжевого и установите ближайший.

Но я не знаю, какой метод фильтрации мне следует использовать из этих https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter (в разделе «См. также»).

И, может быть, есть другое решение, которое не основано на расчетах расстояний?

1 Ответ

0 голосов
/ 20 июня 2019

Если я делаю черно-белый узор со средним цветом # 808080

enter image description here

и применяю следующий фильтр:

<filter id="threshold" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 1"/>
<feFuncG type="discrete" tableValues="0 1"/>
<feFuncB type="discrete" tableValues="0 1"/>
</feComponentTransfer>
<feComponentTransfer>
<feFuncR type="table" tableValues="0.486 0.937"/>
<feFuncG type="table" tableValues="0.812 0.360"/>
<feFuncB type="table" tableValues="0.847 0.125"/>
</feComponentTransfer>
</filter>

В конце концов я получил то, что хотел

enter image description here

Итак, это промежуточное решение.

...