如何向 OpenCV.js 添加 `accumulateWeighted` 支持？答案

【问题标题】：How to add `accumulateWeighted` support to OpenCV.js?如何向 OpenCV.js 添加 `accumulateWeighted` 支持？
【发布时间】：2021-01-01 11:52:55
【问题描述】：

上下文：这与一般意义上的"How to build a custom opencv.js with opencv_contrib ?"有关。

这个问题是一个非常具体的变体：我想使用来自 imgproc 模块的 accumulateWeighted 和 OpenCV.js

到目前为止，我的尝试涉及了解事物的位置，因此我可以尝试稍微调整 emscripten 设置。据我了解，我需要实时处理的大多数文件：

例如我可以在opencv_js.config.py看到这个部分：

imgproc = {'': ['Canny', 'GaussianBlur', 'Laplacian', 'HoughLines', 'HoughLinesP', 'HoughCircles', 'Scharr','Sobel', \
                'adaptiveThreshold','approxPolyDP','arcLength','bilateralFilter','blur','boundingRect','boxFilter',\
                'calcBackProject','calcHist','circle','compareHist','connectedComponents','connectedComponentsWithStats', \
                'contourArea', 'convexHull', 'convexityDefects', 'cornerHarris','cornerMinEigenVal','createCLAHE', \
                'createLineSegmentDetector','cvtColor','demosaicing','dilate', 'distanceTransform','distanceTransformWithLabels', \
                'drawContours','ellipse','ellipse2Poly','equalizeHist','erode', 'filter2D', 'findContours','fitEllipse', \
                'fitLine', 'floodFill','getAffineTransform', 'getPerspectiveTransform', 'getRotationMatrix2D', 'getStructuringElement', \
                'goodFeaturesToTrack','grabCut','initUndistortRectifyMap', 'integral','integral2', 'isContourConvex', 'line', \
                'matchShapes', 'matchTemplate','medianBlur', 'minAreaRect', 'minEnclosingCircle', 'moments', 'morphologyEx', \
                'pointPolygonTest', 'putText','pyrDown','pyrUp','rectangle','remap', 'resize','sepFilter2D','threshold', \
                'undistort','warpAffine','warpPerspective','warpPolar','watershed', \
                'fillPoly', 'fillConvexPoly'],
           'CLAHE': ['apply', 'collectGarbage', 'getClipLimit', 'getTilesGridSize', 'setClipLimit', 'setTilesGridSize']}

我可以简单地将accumulateWeighted 添加到列表中，但是我觉得这也应该适当地调整bindings.cpp / core_bindings.cpp。这就是我在获得 emscripten 经验时有些困惑的地方。

例如添加：

// C++: void accumulateWeighted(InputArray src, InputOutputArray dst, double alpha, InputArray mask=noArray() )
void accumulateWeighted_wrapper(const cv::Mat& src, const cv::Mat& dst, double alpha, cv::Mat& mask) {
    return cv::accumulateWeighted(src, dst, alpha, mask);
}

void accumulateWeighted_wrapper_1(const cv::Mat& src, const cv::Mat& dst, double alpha) {
    return cv::accumulateWeighted(src, dst, alpha);
}
// ...
function("accumulateWeighted", select_overload<void(const cv::Mat&, const cv::Mat&, double , cv::Mat&)>(&Wrappers::accumulateWeighted_wrapper));

function("accumulateWeighted", select_overload<void(const cv::Mat&, const cv::Mat&, double)>(&Wrappers::accumulateWeighted_wrapper_1));

到 bindings.cpp

我不确定我是否遗漏了什么？我希望有更多 OpenCV + emscripten 经验的开发者可以提供指导。

更新我已编译 OpenCV.js using Docker 并尝试调用 cv.accumulateWeighted，但出现错误：

cv.accumulateWeighted(src, dst, 0.001)
opencv.js:9 Uncaught 6587800
___resumeException  @   opencv.js:9
(anonymous) @   02086862:0x1621d4
(anonymous) @   02086862:0x1c1f8
dynCall_viid    @   02086862:0x365dc
dynCall_viiid   @   02086862:0x37296
Module.dynCall_viiid    @   opencv.js:9
dynCall_viiid_532   @   VM1966:4
accumulateWeighted  @   VM3269:10
proto.<computed>    @   opencv.js:9
(anonymous) @   VM5257:1

我不是 100% 确定我做错了什么。这是一个 sn-p，其中包含指向已编译脚本的链接：

function onOpenCvReady(){
  cv.then(test);
}

function test(cv){
  console.log("cv",cv.getBuildInformation());
  
  src = cv.Mat.ones(3,3, cv.CV_8UC1);
  dst = cv.Mat.ones(3,3, cv.CV_8UC1);
  mask = cv.Mat.zeros(3,3, cv.CV_8UC1);


  console.log("dst before", dst.data);

// throws error
  try{
    cv.accumulateWeighted(src, dst, 0.001, mask);
  }catch(err){
    console.warn("error running accumulateWeighted")
    console.warn(err.stack)
  }
  console.log("dst after", dst);
}

&lt;script async src="https://lifesine.eu/so/opencv_js_ubuntu/opencv.js" onload="onOpenCvReady();" type="text/javascript"&gt;&lt;/script&gt;

更新我已经更新了上面的 sn-p 以使用在 Ubuntu 上编译的 OpenCV.js。此外，我在 accumulateWeighted_wrapper 和 accumulateWeighted_wrapper_1 函数中有一个错字，但我仍然收到一个非常相似的错误，这让我相信绑定代码中还缺少其他内容。

向 OpenCV.js 添加accumulateWeighted 支持的正确方法是什么？

【问题讨论】：

我不认为有一个函数 cv::accumulateWeighted(src, dst, alpha) 你需要掩码作为最后一个参数github.com/opencv/opencv/blob/…
@user2258152 不用担心：清楚一点。我确实更新了上面的帖子，用掩码参数测试了同样的事情。
他们有 emscripten 的例子，也许它可以帮助你github.com/opencv/opencv/blob/…
@user2258152 是的，正如您在上面看到的，我尝试将accumulateWeighted_wrapper 和accumulateWeighted_wrapper_1 添加到core_bindings.cpp，然后重新编译OpenCV.js。没有 c++ 编译器错误，只是奇怪的 JS 错误。请注意，如果您尝试使用不同版本的 opencv.js（例如 docs.opencv.org/4.4.0/opencv.js）运行上面的 sn-p，您将收到不同的错误，因为 accumulateWeighted 将丢失
我知道它已经过时了，但是这个github.com/ganwenyao/opencv_js

标签： javascript c++ opencv emscripten

【解决方案1】：

对于这个问题的范围，一种解决方法是不修改 OpenCV.js 并重新编译，以实现 JS 中的功能。该函数大致有两个部分（和一个陷阱）：

累积：在现有图像之上添加新图像
新图像的权重与旧图像成反比
关键是使用图像作为累加器：否则它只是在两个图像之间进行线性插值/lerping/交叉淡入淡出：

cv.lerp = function(lerpFromMat, lerpToMat, lerpResult, amount){
    // TODO: args safety check (including constraining amount)
    if (lerpToMat.cols === 0) {
      lerpFromMat.copyTo(lerpResult);
    } else if (lerpFromMat.cols === 0) {
      lerpToMat.copyTo(lerpResult);
    } else {
      cv.addWeighted(lerpFromMat, amount, lerpToMat, 1.0 - amount, 0.0, lerpResult);
    }
  }

// super simplified alias, skipping mask for now
cv.accumulateWeighted = function(newMat, accumulatorMat, alpha){
   p5cv.lerp(accumulatorMat, newMat, accumulatorMat, alpha);
}

我仍然期待另一个通用解决方案：通过 emscripten 将新的 c++ 函数添加到 OpenCV.js 的过程分解（无论是累积加权还是其他）

【讨论】：