使用ArrayBuffer從畫布獲取像素信息

Question

我有一個從畫布讀取像素信息的功能。 看起來像這樣：

function getPx (imageData, x, y) {

    var r = imageData.data[((y * (imageData.width * 4)) + (x * 4))],
        g = imageData.data[((y * (imageData.width * 4)) + (x * 4)) + 1],
        b = imageData.data[((y * (imageData.width * 4)) + (x * 4)) + 2],
        a = imageData.data[((y * (imageData.width * 4)) + (x * 4)) + 3];

    return {
        r: r,
        g: g,
        b: b,
        a: a,
        black: (r + g + b) / 3
    };

}

這可以正常工作，但是有點慢。 根據我對本文的了解， https：//hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/有一種使用以下方法從畫布讀取/寫入imageData的方法要快得多稱為ArrayBuffer的東西。 不幸的是，我無法使它正常工作。 那么，有誰知道該怎么做？

更新 ：

我有一個畫布，我想在其中測量一些點的顏色或Alpha值，所以我不會對所有像素都這樣做。 到目前為止，我的嘗試看起來像這樣：

function getPx (imageData, x, y) {

    var data32 = new Uint32Array(imageData.data.buffer);
    var rv = data32[y * imageData.width + x];
    return rv;

}

這將返回值，並且似乎是正確的方式，但是我得到的值看起來像是4076863488和4244635648，但我不確定如何將它們轉換為我想要的數據。

Answer 1

正如@Kaiido提到的那樣，速度要慢一些。 但是對於任何想對此進行詳細說明的人，這是我的最終職責。

function getPx (imageData, x, y) {

    var data32 = new Uint32Array(imageData.data.buffer),
        val32 = data32[y * imageData.width + x],
        str32,
        a = 0,
        b = 0,
        g = 0,
        r = 0;

    if (val32 > 0) {
        str32 = val32.toString(16);
        a = parseInt(str32.substr(0, 2), 16);
        b = parseInt(str32.substr(2, 2), 16);
        g = parseInt(str32.substr(4, 2), 16);
        r = parseInt(str32.substr(6, 2), 16);
    }

    return {
        r: r,
        g: g,
        b: b,
        a: a,
        black: (r + g + b) / 3
    };

}

而且，如果多次使用相同的imageData調用data32 = new Uint32Array（imageData.data.buffer） ，則最好將其放在函數之外。