着色灰度图像

我想着色与用户选择的前景色和背景色飞灰度图像（仅限于红色，绿色，蓝色，青色，品红色，黄色，黑色和白色）。我想要的效果如下：着色灰度图像

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>标签或可以在<svg>标签内是<image>（后者实际上是优选的）。

一个理想的解决方案可能涉及SVG过滤器（这是我所没有的经验，他们可以做到这一点？）。另一种可能性可能会将我的灰度图像视为一个alpha通道，其上方是纯色，下方是纯色（不知道我该如何处理）。

对于那些有Adobe Director经验的人，我想要的效果与Director的颜色和bgColor属性相同。（我正在将一个项目从Director转换为html5/javascript。）

来源

2012-12-26 BobW

由于您选择的颜色有限，因此将这8个选项设置为具有透明背景的png文件可能最为简单。然后背景颜色只是CSS，你就完成了。 30fps可能太多了。 – Popnoodles

@popnoodles（感谢您在图片中进行编辑）。我会尝试一下，尽管它可能仍然包含不切实际的图像数量（我有更多的形状来处理比这里显示的螺旋）。我也开始研究svg过滤器。 feComponentTransfer过滤器看起来很有前途。 – BobW

哦，那我就不会接受我说的话了。从给出的信息中，我感觉有8个可能的保存图像。 SVG最有意义。 – Popnoodles

OK，我一直在使用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所述第一数目是应该更换黑色图像中的值，第二个数字是应该更换白色的值。因此，为了将黑/白变成红/黄，feFuncR,feFuncG和feFuncB的tableValues分别是“11”，“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 bug，早已在Chrome中得到修复。

我希望这对某人有用！

来源

2012-12-27 19:23:57 BobW

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

In example：

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

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

来源

2012-12-26 17:45:51 sanbor

不幸的是，我无法获得适合图像的填充样式。 – BobW

哦，对不起，也许你可以操纵像素，然后http://beej.us/blog/data/html5s-canvas-2-pixel/ – sanbor

欢迎的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元素可能是你的兴趣。

来源

2012-12-26 21:38:26 seliopou

谢谢 - 这可能会更简单，我现在试图与'feComponentTransfer'（http ：//jsfiddle.net/yPXf5/5/）。我不确定它会如何改变，例如，像上面的例子那样，黑色变成黄色，白色变成红色。我将不得不探索乘法之外的其他模式。 – BobW

@BobW是的，这可以将白色转换为颜色，但对于更复杂的颜色转换，您必须尝试其他滤镜元素或混合模式。 – seliopou

'Multiply'或'darken'变成白色变成一种颜色，''screen'或'lighten'变成黑色变成一种颜色。看起来，立刻做两件事情都超出了'feBlend'，但可能可以通过'feComposite'完成。 – BobW

着色灰度图像

回答

相关问题