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/中的理解，使用名为ArrayBuffer的东西可以更快地从画布读取/写入imageData。不幸的是，我无法让它发挥作用。那么有谁知道如何做到这一点？

更新：

我有一个画布，我想测量一些点颜色或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）放在函数之外。

使用ArrayBuffer

1 个答案: