Question

我正在尝试构建一个C ++函数，并使用Emscripten将其编译为WASM。
此函数将执行的操作是接收图像并对其进行一些处理并返回结果。
我的第一个POC成功，用户使用file输入上传图片，然后使用FileReader API传递图片数据：

const fileReader = new FileReader();
fileReader.onload = (event) => {
   const uint8Arr = new Uint8Array(event.target.result);
   passToWASM(event.target.result);
};

fileReader.readAsArrayBuffer(file); // I got this `file` from `change` event of the file input.

但是当我实现了摄像头提要并开始获取将其传递给WASM的帧时，我开始在C ++方面获得异常，这是JS实现：

let imageData = canvasCtx.getImageData(0, 0, videoWidth, videoHeight);
var data=imageData.data.buffer;
var uint8Arr = new Uint8Array(data);
passToWASM(uint8Arr);

这会在C ++方面引发异常。

现在passToWASM的实现是：

function passToWASM(uint8ArrData) {
   // copying the uint8ArrData to the heap
   const numBytes = uint8ArrData.length * uint8ArrData.BYTES_PER_ELEMENT;
   const dataPtr = Module._malloc(numBytes);
   const dataOnHeap = new Uint8Array(Module.HEAPU8.buffer, dataPtr, numBytes);
   dataOnHeap.set(uint8ArrData);

   // calling the WASM function
   const res = Module._myWASMFunc(dataOnHeap.byteOffset, uint8ArrData.length);
}

尽管C ++实现将是这样的：

void EMSCRIPTEN_KEEPALIVE checkImageQuality(uint8_t* buffer, size_t size) {
   // I'm using OpenCV in C++ to process the image data
   // So I read the data of the image
   cv::Mat raw_data = cv::Mat(1, size, CV_8UC1, buffer);

   // Then I convert it
   cv::Mat img_data = cv::imdecode(raw_data, cv::IMREAD_COLOR | cv::IMREAD_IGNORE_ORIENTATION);

   // in one of the following steps I'm using cvtColor function which causes the issue for some reason
}

由于摄像机的实现而出现的异常提示：

OpenCV（4.1.0-dev）../modules/imgproc/src/color.cpp:182：错误：（-215：断言失败）！_src.empty（）在函数'cvtColor'中

使用file输入和传递数据以及从canvas获取数据（只要将两者都转换为Uint8Array <）之间有什么区别？ / p>

Answer 1

我找到了解决方案（也许只适合我的情况）。
当您尝试从canvas获取图像数据时，会以4个通道（例如PNG）的形式获取它，并且根据您的图像处理代码，您需要对其进行处理。
我的代码正在考虑图片应为3个通道（例如jpeg），因此我必须使用以下代码进行转换：

canvasBuffer.toBlob(function (blob) {
  passToWASM(blob);
},'image/jpeg');

如何将图像相机传递给wasm（C ++）中的功能？

1 个答案: