如何檢查像素是否落在特定區域內？

我在畫布上繪製了一幅複雜的圖像，我希望能夠隨意更改該圖像中區域的透明度。我將這些區域劃分爲單獨文件中的蒙版。有沒有辦法做到這一點？如何檢查像素是否落在特定區域內？

我當時的想法是逐個像素地分析畫布，並且如果問題中的像素落入由面具概述的特定區域，則相應地修改它的透明度。但是，我不確定如何檢查像素是否在該區域內？我可能有一個單獨的畫布元素，每個區域只檢查相應的像素是否存在。但聽起來很笨拙。有更好的方法嗎？優雅？也許有些數學魔法？還是我不知道的方法？

來源

2012-08-30 jayarjo

如何定義您的「區域」？他們是多邊形嗎？正方形？位圖掩碼？ –

作爲面具。在白色背景上的黑點。位圖。但是我可以考慮使用一些多邊形，如果這樣可以使任務更容易，更有效。 – jayarjo

位圖遮罩需要更多的內存，但通過初始化後，它們比用於簡單像素檢查的多邊形更快。 –

如果要檢查圖像中的像素是黑色還是白色，首先需要使用getImageData獲取數據，然後只需在正確的座標處檢查值（4字節，因爲RGBA）。

var maskCanvas = document.createElement('canvas'); 
maskCanvas.width = w; 
maskCanvas.height = h; 
var context = maskCanvas.getContext('2d'); 
context.drawImage(yourMaskImage, 0, 0); 
var pixels = context.getImageData(0, 0, w, h).data;

如果圖像尺寸(w, h)，你的陣列將有一個大小的w*h*4，你會使用這個能夠得到一種顏色在(x,y)：

var i = 4*(x+w*y); // 
var color = (pixels[i]<<16) + (pixels[i+1]<<8) + (pixels[i+2]); // I don't care about the alpha

當你直接在工作字節數組，這是非常快的（如果你保持陣列在檢查之間）。

請注意，包含掩碼的圖像必須來自與主頁相同的域。

來源

2012-08-30 13:31:47

因此，它是唯一有效的方法 - 將所有掩碼加載到字節數組中，然後檢查像素是否存在？每個區域都將獨立改變透明度。 – jayarjo

是的。但是，隨着像素被解碼（從圖像格式）並準備好讀取數組，這很快且容易。我在非常大的圖像上做（存儲2D地圖）。 –

如何檢查像素是否落在特定區域內？

回答

相關問題