D3.JS：用于图像处理的离散滤波器答案

【问题标题】：D3.JS: Discrete filter for image processingD3.JS：用于图像处理的离散滤波器
【发布时间】：2019-11-02 12:00:55
【问题描述】：

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

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

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

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

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

【问题讨论】：

您的输入栅格是什么格式？除了过滤器之外，您还需要 SVG 吗？
输入格式为PNG。是的，我可以使用画布来离散化图像，实际上，这是当前的解决方案，但我正在寻找一种使用 SVG 过滤器的优雅方式，而这个 PNG 图像是 svg:pattern 的一部分。
这段代码是双色调：svg.append("filter").append("feComponentTransfer").attr("color-interpolation-filters", "linearRGB").append(" feFuncR").attr("type", "table").attr("tableValues", "0.486 0.937").append("feFuncG").attr("type", "table").attr("tableValues" , "0.812 0.360").append("feFuncB").attr("type", "table").attr("tableValues", "0.847 0.125") 也许我需要以某种方式调整灰度矩阵在这样做以“增加”对比度之前。
找到了这个教程：thirdandgrove.com/…值得一试

标签： image d3.js svg filter discretization

【解决方案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>

我最终得到了我想要的

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

【讨论】：