使用 ArrayBuffer 从 canvas 获取像素信息

Question

我有一个函数可以从 canvas 读取像素信息。它看起来像这样：

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/ 中了解到，有一种使用名为 ArrayBuffer 的东西从 canvas 获取 read/write imageData 的方法要快得多。不幸的是，我无法让它发挥作用。那么有人知道怎么做吗？

更新:

我有一个 canvas，我想在其中测量一些点的颜色或 alpha 值，所以我不会对所有像素执行此操作。到目前为止，我的尝试如下所示：

function getPx (imageData, x, y) {

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

}

这个 returns 值似乎是正确的，但是我得到的值可能看起来像这样 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
    };

}

此外，如果您多次使用相同的图像数据调用此函数，最好将 data32 = new Uint32Array(imageData.data.buffer) 放在函数外部。

使用 ArrayBuffer 从 canvas 获取像素信息

Get pixel information from canvas using ArrayBuffer

html

javascript

canvas

arraybuffer