着色灰度圖像

我想着色與用戶選擇的前景色和背景色飛灰度圖像（僅限於紅色，綠色，藍色，青色，品紅色，黃色，黑色和白色）。我想要的效果如下：着色灰度圖像

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

着色灰度圖像

回答

相關問題