2

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

原始灰度 http://crawdad.cornell.edu/test/1.png 红色前景 http://crawdad.cornell.edu/test/2.png 红色前景，黄色背景 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。）

4

3 回答 3

4

欢迎来到SVG 滤镜效果的美妙世界，一切皆有可能，但要花很长时间才能弄清楚。下面是一个如何用红色和蓝色做你想做的事情的例子。混合可能不是您想要的，您可能会从为颜色添加一些透明度中受益。

<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元素还有一些您可以尝试的模式。您也可能对feCompositeand元素感兴趣。feColorMatrix

于 2012-12-26T21:38:26.793 回答
3

好的，我有一个使用 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（为了简化，我给了feFuncRet al ids）如下。每个tableValues中的第一个数字是应该替换图像中黑色的值，第二个数字是应该替换白色的值。因此，要将黑色/白色更改为红色/黄色，tableValuesfor feFuncR、feFuncG和feFuncB分别为“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 中得到修复。

我希望这对某人有用！

于 2012-12-27T19:23:57.623 回答
0

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

例如：

document.querySelector('#g2161').setAttribute('style','fill:blue');
于 2012-12-26T17:45:51.837 回答