如何在不复制的情况下将画布 imageData 传递给 emscripten c++ 程序？答案

【问题标题】：How to pass canvas imageData to emscripten c++ program without copying it?如何在不复制的情况下将画布 imageData 传递给 emscripten c++ 程序？
【发布时间】：2015-12-16 09:00:27
【问题描述】：

我有画布的图像数据：

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++函数原型为：

extern "C" {

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

}

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

【问题讨论】：

这是在什么浏览器/操作系统/系统规格上运行的？在内存中复制一张 640x480 的图像需要 17ms 有点长...
Chrome 46 / Windows 7 64bit / Xeon E31235 @ 3.20 GHz / 8 GB。在 firefox set() 上要快得多，但 emcescript asm.js 的工作速度较慢...

标签： javascript c++ canvas emscripten asm.js

【解决方案1】：

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

从 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，这可能会使它的性能比您的原始代码差。

【讨论】：