在畫布中填充繪製圖像的一部分

Question

我使用html5畫布的drawImage（）API繪製圖像。現在我想用不同的顏色填充該繪製的圖像的空白區域（單個框個體顏色）。我該怎麼做？我使用html5 canvas和jquery。

我想填充不同顏色的白色空間，這些白色空間不是合適的矩形框。

在此先感謝。

Answer 1

[從提問回答改變後澄清]

已知：具有許多完全封閉的透明區域的圖像。

這是填充每個透明區域與不同的顏色的方法：

1. 使用context.getImageData獲得每個像素的畫布[R，G，B，A]值的陣列。

2. 環路直通的陣列，並找到所述第一透明像素（以下簡稱「a」值== 0）

3. Floodfill含有具有新不透明的顏色該像素的整個透明區域（代替R，G， b值與您的新顏色並替換「a」值== 255）。

4. 重複步驟＃2，直到所有透明區域都填充了新的獨特顏色。

爲了讓你開始...

威廉·馬龍寫了一篇關於如何獲得和使用畫布[R，G，B，A]彩色陣列非常漂亮文章。

他的文章還向您展示瞭如何「填充」 - 在整個連續區域用新顏色替換現有顏色。

在你的情況下，你會用一種新顏色替換透明像素。

這是他的文章：

http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/

[加成問題：將圖像插入區]

你需要將每一種彩色區域透明再次 - 一次一個

如果您保存每個區域的起始像素，當您最初着色區域時，您可以sta rt與該像素相關並重新填充一個區域。這次您將該區域中每個像素的alpha分量設置爲0（透明）。

由於每個單獨區域都是透明的，因此您只使用合成到只在現有像素透明的情況下繪製新圖像。你想要的組合是context.globalCompositeOperation =「source-out」。

這些例子表明：

• 唯一着色每個區域之後。
• 使1區域透明後（右上區域是透明的）。
• 將圖像合成到透明區域後。

Answer 2

//繪製一些白色，綠色，藍色條紋

for (var i = 0; i < canvas.width; i += 10) { 
     for (var j = 0; j < canvas.height; j += 10) { 
      context.fillStyle = (i % 20 === 0) ? "#fff" : ((i % 30 === 0) ? "#0f0" : "#00f"); 
      context.fillRect(i, j, 10, 10); 
     } 
    } 
    var imagedata = context.getImageData(0, 0, canvas.width, canvas.height), 
      pixels = imagedata.data; 


     //if found white pixel i.e 255,255,255 changes it to 0,102,204 

//你可以爲u希望

for (var offset = 0, len = pixels.length; offset < len; offset += 4) { 

     if(pixels[offset]==255 && 
       pixels[offset+1]==255 && 
       pixels[offset+2]==255) 

     {pixels[offset] = 0; // 
     pixels[offset + 1] = 102; // 
     pixels[offset + 2] = 204; // 
     } 

    } 
    context.putImageData(imagedata, 0, 0);