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

最后我得到了我想要的

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