为imageData.data分配缓冲区位置,而不是使用循环分配值

时间:2016-11-11 07:59:26

标签: javascript html5-canvas

我使用emscripten在C ++中创建一个位图,我将其传递给我的javascript代码

const int COMP = 4;
long createBitmap(int DIM)
{
    srand(NULL);
    // create buffer
    long buffer = EM_ASM_INT(
    {
        var buffer = Module._malloc($0 * 1);
        return buffer;
    }, DIM*DIM*COMP);

    uint8_t* bitmap = (uint8_t*)buffer;

    //just randomly fill the buffer
    for (int i = 0; i < DIM*DIM*COMP; i++)
    {
        if (i%4==3)
            bitmap[i] = 128;
        else
            bitmap[i] = rand()%256;
    }

    return buffer;
}

在javascript中我有以下代码:

var dim = 1080;
var buffer = Module.createBitmap(dim);
var c = document.getElementById("bitmap");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(dim,dim);
for (var i = 0; i < dim*dim*4; i++) {
    imgData.data[i] = Module.HEAPU8[buffer+i];
}

ctx.putImageData(imgData, 0, 0)

这很好但我不喜欢将缓冲区的所有元素分配给imgData.data数组的循环。我知道我在C ++中使用的uint8_t数据类型对应Uint8ClampedArray的{​​{1}}。对我来说,这似乎是一个很好的机会,只需将缓冲区的开头分配给imgData.data,我就不必复制任何东西 - 这可能吗?

1 个答案:

答案 0 :(得分:0)

我从emscripten google群组中获得了this answer

答案其实很简单。

var mappedBuffer= new Uint8ClampedArray(Module.HEAPU8.buffer, buffer, dim * dim * 4)

所以HEAPU8.buffer访问底层缓冲区,然后我可以创建一个Uint8ClampedArray类型的数组。

然后你可以简单地写

imgData.data.set(mappedBuffer)
ctx.putImageData(imgData, 0, 0)