我有 Canvas 的图像数据:
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()
仍然需要 17 毫秒才能执行。
C++函数原型(prototype)为:
extern "C" {
int processImage(unsigned char *buffer, int width, int height)
{
}
}
有没有什么方法可以不使用 set()
将数组传递给 C++?只是告诉 C++ 数据在内存中的位置,并允许修改它?
最佳答案
Just telling the c++ where the data is in memory, and allow to modify it?
从 v1.34.12 开始,Emscripten 有一个 SPLIT_MEMORY选项,您可以在其中告诉 Emscripten 使用现有缓冲区作为其内存空间的一部分,该内存空间被分成大小均匀的 block
例如,您可以从 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);
然后将指向该 block 的指针传递给您的 C++ 函数。
var pointerToImageInGlobalMemorySpace = chunkIndex * bufferSize;
_processImage(pointerToImageInGlobalMemorySpace, width, height);
但是存在问题和限制
- 必须将 Emscripten 内存空间分成与 Canvas 图像数据缓冲区大小完全相同的 block 。
- 显然有 serious performance implications对于所有 Emscripten 编译的代码,这可能会使它的性能比您的原始代码差。
关于javascript - 如何在不复制的情况下将 canvas imageData 传递给 emscripten c++ 程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34307692/