找到匹配給定顏色的HTML5畫布的座標

Question

我需要一種方法來查找具有特定顏色的每個像素的座標。我可以遍歷整個圖像中的每個像素並檢查是否匹配，但這看起來效率不高。有沒有更好的辦法？

Answer 1

您將不得不遍歷數組，因爲這是評估畫布中所有像素的唯一方法。

但是，您可以使用32位整數（類型）陣列，而不是標準的8位陣列 - 這將是快許多倍：

var idata = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height), 
    buffer32 = new Uint32Array(idata.data.buffer), 
    len = buffer32.length, 
    i = 0, x, y, 
    color = 0xffffffff; /// white color (ABGR format on little-endian systems) 

for(; i < len; i++) { 
    if (buffer32[i] === color) { 
     /// convert i to x/y position here 
     x = i % idata.width; 
     y = (i/idata.height)|0; 
    } 
}