如何比較通過ctx.getImageData（）從HTML5畫布檢索的顏色對象（的內容）

Question

我想比較從HTML5畫布檢索到的（有限數量的）顏色值。 因此，我通過ctx.getImageData(x, y, 1, 1).data;檢索並存儲我感興趣的ctx.getImageData(x, y, 1, 1).data;

然后，我嘗試使用Array.prototype.compare來自： 如何在JavaScript中比較數組？ 通過：

// add the same compare method to Uint8ClampedArray
Uint8ClampedArray.prototype.compare=Array.prototype.compare;

在最近的FireFox和Chrome上運行良好，但我很快發現並非所有瀏覽器都返回Uint8ClampedArray類型的對象。 IE似乎使用CanvasPixelArray的對象，而Safari似乎使用簡單的4值數組

我必須自己解決這些差異，還是有一種可靠的通用方法（普通JS或jQuery）來比較ctx.getImageData（）在所有瀏覽器上均可使用的兩個這樣的值？

Answer 1

您可以（可能嗎？）使用Array比較方法，如下所示：

var comparisonResult = [].compare.call(yourPixels, colors);

該代碼從數組實例中找到“比較”方法，並以您的像素數組作為this值，另一個數組（您的顏色）作為第一個參數來調用它。

這將是同一件事：

var comparisonResult = Array.prototype.compare.call(yourPixels, colors);

但更多的是打字，我很懶。 無論如何，只要像素“看起來像”適合您的數組（它們具有“ length”屬性和[]索引功能）即可。

編輯 -我只是看了您鏈接的問題。 如果您只需要一個“比較”功能，則無需將其添加到Array原型中，因為無論如何您都不會使用它。 只需編寫一個帶有兩個參數的比較函數。