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

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

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

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

一个理想的解决方案可能涉及svg过滤器（我没有经验，他们可以这样做吗？）。另一种可能性可能是将我的灰度图像视为一个alpha通道，上面是纯色，下面是纯色（不知道我是怎么做的。）

对于具有Adobe Director经验的人，我想要的效果与Director的颜色和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等id s），如下所示。每个tableValues中的第一个数字是应该替换图像中的黑色的值，第二个数字是应该替换白色的值。因此，要将黑/白变为红/黄，tableValues，feFuncR和feFuncG的{{1}}为“1 1”，“0 1”和“0” 0“，分别。（将rgb范围0-255映射到0-1。）

设置feFuncB至关重要。在别人向我指出之前，我昨天试图解决这个问题。

注意：截至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

着色灰度图像

3 个答案: