如何在不复制canvas imageData的情况下将其传递给emscripten c++程序

How to pass canvas imageData to emscripten c++ program without copying it?

本文关键字：emscripten 程序 c++ 情况下 复制 canvas imageData      更新时间：2023-10-16

我有画布的图像数据：

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

我发现，我可以创建新的Uint8Array并使用set()来复制图像数据。这是一个工作示例：

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)
    {
    }
}

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

只是告诉c++数据在内存中的位置，并允许对其进行修改？

从v1.14.12开始，Emscripten有一个SPLIT_MEMBORY选项，您可以告诉Emscripten使用现有的缓冲区作为其内存空间的一部分，该内存空间被拆分为大小均匀的块

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

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

然后，根据拆分内存的解释修改示例，告诉Emscripten将该缓冲区作为其内存空间的一部分

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

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

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

但是存在问题和限制

  • Emscripten内存空间必须划分为与画布图像数据缓冲区大小完全相同的块
  • 显然，所有Emscripten编译的代码都会对性能产生严重影响，这可能会使其性能比原始代码差
相关文章：