D3.JS：用于图像处理的离散滤镜

Question

我有一个任意的光栅图案，其中蓝色为-1.0，白色为0.0，橙色为1.0（左图）。需要开发一个SVG过滤器，类似于参考文献Graying out an image in D3js），但要离散化（右图）。

最终，所有三种颜色的值都已知。

基本上可以肯定，我需要遍历每个像素并计算到蓝色和橙色的距离并设置最接近的距离。

但是，我不知道在这些https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter中应该使用哪种过滤方法（请参见另请参见）。

也许还有另一种解决方案，不是基于距离计算吗？

Answer 1

如果我使用中间颜色＃808080的黑白图案

并应用以下过滤器：

<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>

我终于有了想要的东西

所以，这是一个半途而废的解决方案。