对灰度图像进行着色

Question

我正在尝试使用用户选择的前景色和背景色（仅限于红色、绿色、蓝色、青色、洋红色、黄色、黑色和白色）对灰度图像进行动态着色。我想要的效果如下：

original grayscale http://crawdad.cornell.edu/test/1.png red foreground http://crawdad.cornell.edu/test/2.png red foreground, yellow background http://crawdad.cornell.edu/test/3.png

从左到右，这些显示原始灰度图像，用户选择红色作为背景颜色的图像，以及具有红色背景/黄色前景的相同图像。

每次用户选择颜色时都在画布中重绘图像是不切实际的（图像将是 800x800 像素，我需要为动画创建 30 帧）。

我只针对最新版本的 WebKit、Firefox 和 Internet Explorer，所以 html5、css3 和 svg 效果都可以。图片可以是直接的 html <img> 标记，也可以是 <image> 内的 <svg> 标记（实际上后者更可取）。

理想的解决方案可能涉及 svg 过滤器（我没有经验，他们可以这样做吗？）。另一种可能性可能会将我的灰度图像视为 Alpha 通道，其上方为纯色，下方为纯色（不确定我将如何即时执行此操作）。

对于有 Adob​​e Director 经验的人来说，我想要的效果和 Director 的 color 和 bgColor 属性一样。 （我正在将一个项目从 Director 转换为 html5/javascript。）

Answer 1

欢迎来到SVG filter effects 的奇妙世界，在这里一切皆有可能，但需要很长时间才能弄清楚。下面是一个如何用红色和蓝色做你想做的事情的例子。混合可能不是您想要的，您可能会受益于为颜色添加一些透明度。

<svg>
  <defs>
    <filter x="0%" y="0%" width="100%" height="100%" id="mk">
      <feImage xlink:href="http://crawdad.cornell.edu/test/1.png" result="img"/>
      <feBlend in="img" in2="SourceGraphic" mode="multiply"> </feBlend>
    </filter>
  </defs>

  <rect width="100" height="100" fill="red" filter="url(#mk)" />
  <rect x="110" width="100" height="100" fill="blue" filter="url(#mk)" />
</svg>

feBlend 元素还有更多模式可供您尝试。您可能还会对feComposite 和feColorMatrix 元素感兴趣。

Answer 2

好的，我有一个使用 SVG 过滤器的解决方案。

<defs>
    <filter id="colorize">
        <feComponentTransfer color-interpolation-filters="sRGB">
            <feFuncR id="fR" type="table" tableValues="0 1"/>
            <feFuncG id="fG" type="table" tableValues="0 1"/>
            <feFuncB id="fB" type="table" tableValues="0 1"/>
        </feComponentTransfer>
    </filter>
</defs>
<image  filter="url(#colorize)" x="0" y="0" width="100" height="100" xlink:href="urlOfGrayscaleImage"/>

然后使用 JavaScript 设置tableValues（为了简化，我给了feFuncR 等ids）如下。每个tableValues 中的第一个数字是应该替换图像中黑色的值，第二个数字是应该替换白色的值。因此要将黑色/白色更改为红色/黄色，feFuncR、feFuncG 和 feFuncB 的 tableValues 分别为“1 1”、“0 1”和“0 0”。 （将 0-255 的 rgb 范围映射到 0-1。）

设置color-interpolation-filters="sRGB" 至关重要。在其他人向我指出之前，我昨天试图解决这个问题而发疯了。

注意：截至 2012 年 12 月 27 日，Safari 会忽略 color-interpolation-filters="sRGB"，而 Chrome 和 Firefox 会使用它。我希望 Safari 发布一个使用更新的 WebKit 的版本；这不是 Safari 中唯一一个挥之不去的 SVG 错误，但早已在 Chrome 中得到修复。

我希望这对某人有用！

Answer 3

也许您可以选择节点并更改它们的属性。

In example:

document.querySelector('#g2161').setAttribute('style','fill:blue');

• 原始svg http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg