javascript – 如何将canvas imageData传递给emscripten c程序而不复制它？

2023年4月7日 470次阅读

我有画布的图像数据：

myImage = ctx.getImageData(0, 0, 640, 480);

我想通了,我可以创建新的Uint8Array并使用set()来复制imagedata.这是一个有效的例子：

var numBytes = width * height * 4;
var ptr= Module._malloc(numBytes);
var heapBytes= new Uint8Array(Module.HEAPU8.buffer, ptr, numBytes);
heapBytes.set(new Uint8Array(myImage.data));
_processImage(heapBytes.byteOffset, width, height);
myImage.data.set(heapBytes);

但是,不幸的是,每个.set()操作都比处理图像慢得多,而且上面的代码比JS实现慢！

所以,我想处理图像而不复制它.我可以通过这种方式成功地直接读取和写入数据：

Module.HEAPU8.set(myImage.data, myImage.data.byteOffset);
_processImage(myImage.data.byteOffset, width, height);
myImage.data.set(new Uint8ClampedArray(Module.HEAPU8.buffer , myImage.data.byteOffset , numBytes));

它更快,但仍然是第一个.set()需要17ms才能执行.

c函数原型是：

extern "C" {

    int processImage(unsigned char *buffer, int width, int height)
    {
    }

}

有没有办法将数组传递给C而不使用set()？只是告诉c数据在内存中的位置,并允许修改它？

最佳答案

Just telling the c++ where the data is in memory, and allow to modify it?

从v1.34.12开始,Emscripten有一个SPLIT_MEMORY选项,你可以告诉Emscripten使用现有缓冲区作为其内存空间的一部分,将其分成大小均匀的块

例如,您可以从画布中获取缓冲区

var existingBuffer = myImage.data.buffer;
var bufferSize = existingBuffer.byteLength; // Must be equal to SPLIT_MEMORY

然后,修改explanation of split memory中的示例,告诉Emscripten将此缓冲区用作其内存空间的一部分

var chunkIndex = 2; // For example
allocateSplitChunk(chunkIndex, existingBuffer);

然后将指向块的指针传递给C函数.

var pointerToImageInGlobalMemorySpace = chunkIndex * bufferSize;
_processImage(pointerToImageInGlobalMemorySpace, width, height);

然而,存在问题和限制

>必须将Emscripten内存空间拆分为与画布图像数据缓冲区大小完全相同的块.
>对于所有Emscripten编译的代码,显然有serious performance implications,这可能会使这种性能比原始代码更差.

点赞