OpenCV(C++)处理来自JavaScript / Web Assembly的图像数据

OpenCV (C++) to process image data coming from JavaScript / Web Assembly

本文关键字:Web Assembly 数据 图像 JavaScript C++ 处理 OpenCV      更新时间:2023-10-16

我已经成功地将C++脚本移植到 wasm,但现在我在从我的 Web 应用程序向其发送数据时遇到问题。

长话短说,在应用程序的C++"版本"中,我正在使用OpenCV打开两个图像,这些图像通过cli传入 - 大致如下:

#include <opencv.hpp>
using namespace cv;
int calc(int argc, char** argv) {
Mat img1_temp, img2_temp;
img1_temp = imread(argv[1],-1);
img2_temp = imread(argv[2],-1);
// further processing ...
}

这适用于 CLI 如下:./app one.jpg two.jpg.

将应用程序移植到 wasm 时,我无法再使用 CLI 发送图像,当然我也无法发送文件,所以我最终拥有以下代码(现在是客户端 JavaScript(:

// url is a remote image
const urlToUint8Array = async url => {
const response = await fetch(url);
const buffer = await response.arrayBuffer();
const arr = new Uint8Array(buffer);
return arr;
};
const waModule = await WAModule();
document.getElementById('calculate').addEventListener('click', () => {
waModule.FS.writeFile('in1.ext', one, { encoding: 'binary' });
waModule.FS.writeFile('in2.ext', two, { encoding: 'binary' });
waModule._calc('in1.ext', 'in2.ext')); // this does not work
});

问题是,如何将图像从JS发送到wasm。我还尝试修改C++文件以使用imdecode而不是imread(并重新编译 wasm(,但我不确定这是否是正确的路径。

总而言之,我正在寻找一种方法,将图像数据从我的客户端JavaScript发送到WASM以进行进一步分析,由OpenCV处理。

您好,我主要使用enscripten,绝不是这方面的专家。我给我2美分,以防它可以帮助你:

  1. 瓦斯姆有自己的记忆。它是一个沙盒,您可以将数据transfer到其中。这意味着如果您在JS端创建了一些内存,则在传输到C++端时将有此数据的副本。
  2. 出于安全目的,此内存不共享。分配内存并将其用于 WASM 和 JS 的一种方法是在 WASM 端分配内存并在 JS 中使用它。(Module.HEAP8等(。

现在回到你的问题,记住这一点:

实际上,您可以授予 WASM 从某个文件夹读取或向文件系统授予某些权限的安全权限。(https://emscripten.org/docs/porting/files/file_systems_overview.html#file-system-runtime-environment(这里有一个基于enscripten库 https://github.com/emscripten-core/emscripten/blob/master/tests/fs/test_nodefs_rw.c 的示例。

您可以在 WASM 端分配缓冲区的内存,使用 Uint8Buffer 读取数据,这些数据由两者共享,然后进行计算。