javascript - 如何在不复制的情况下将canvas imageData传递给Emscripten C++程序？

我有 Canvas 的图像数据:

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()仍然需要17毫秒才能执行。

C++函数原型(prototype)为:

extern "C" {

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

}

有没有办法在不使用set()的情况下将数组传递给C++？只是告诉C++数据在内存中的位置，并允许对其进行修改？

最佳答案

从v1.34.12开始，Emscripten具有SPLIT_MEMORY选项，您可以在其中告诉Emscripten将现有缓冲区用作其内存空间的一部分，该缓冲区被分成均匀大小的块

例如，您可以从 Canvas 获取缓冲区

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内存空间必须分成与 Canvas 图像数据缓冲区大小完全相同的块。

所有Emscripten编译的代码显然都有serious performance implications，这可能会使此代码的性能比原始代码差。