javascript - 将图像转换为可变数量的灰度

Question

我想将图像转换为可变数量的灰度，该数量可由用户配置，范围从 2(单色/黑白)到 256(全灰度)。

我尝试用 css 和 svg 过滤器来完成这个，例如在 CSS 中:

filter: grayscale(100%)

将图像转换为灰度，这是我想要的 256 灰度但其他值如

filter: grayscale(10%)

不限制灰度数，只减少图片中使用的颜色数，所以我用这些滤镜永远得不到单色的结果。

感谢您的帮助。

Answer 1

您可以使用 SVG 过滤器执行此操作，但在 Internet Explorer 中最多只能有 64 个值。直黑/白后色调的过滤器是这样的:

<filter id="greyscale-posterize" color-interpolation-filters="sRGB">
<feColorMatrix type="saturate" values="0"/>
<feComponentTransfer>
  <feFuncR type="discrete" tableValues="0 1"/>
  <feFuncG type="discrete" tableValues="0 1"/>
  <feFuncB type="discrete" tableValues="0 1"/>
</feComponentTransfer>
</filter>

十值灰度的过滤器是:

<filter id="greyscale-posterize" color-interpolation-filters="sRGB">
<feColorMatrix type="saturate" values="0"/>
<feComponentTransfer>
  <feFuncR type="discrete" tableValues="0 .1 .2 .3 .4 .5 .6 .7 .8 .9 1"/>
  <feFuncG type="discrete" tableValues="0 .1 .2 .3 .4 .5 .6 .7 .8 .9 1"/>
  <feFuncB type="discrete" tableValues="0 .1 .2 .3 .4 .5 .6 .7 .8 .9 1"/>
</feComponentTransfer>
</filter>

当输入发生变化时，使用 JavaScript 写入适当数量的范围。