如何在JavaScript中爲圖像着色？

Question

我正在尋找通過某些規則來彩色圖像像素的方法。可以說我有一些圖像：

<div id="static"> 
    <img border="0" src="some/image.png"> 
</div> 

我想根據RGB（或其他方式）將像素着色爲黑色。

到

我知道該怎麼做，在Java

，發現源如何做到這一點的C++（example）

但JavaScript。 ..嗯

請幫助我。

Answer 1

你應該能夠做一些類似的，儘管可能很慢用帆布。

看到這個職位後，如何抓取像素的顏色後，將您的圖像轉換爲畫布表示： How to get a pixel's x,y coordinate color from an image?。

您必須使用for循環替換event.OffsetX和event.OffsetY中每個像素的座標，以檢索每個像素的RGB。然後，如果它不匹配藍色的RGB值，用黑色代替像素的顏色，如果是藍色，白色取代它。如果沒有鎖定瀏覽器（我還沒有親自使用canvas來了解它的性能），除非將它卸載到web worker，否則它會在另一個線程中發生，否則它會非常緩慢，邊界線可能不可行。