opencv wasm 试用

发布时间 2023-10-30 16:06:57作者: 荣锋亮

基于webassembly 的opencv nodejs 开发是一个很不错的体验,不用考虑node addon 的各种问题,而且性能也不错
以下是基于echamudi/opencv-wasm 构建的4.8.1 版本的试用,代码来自opencv-wasm 的示例demo

试用

  • pacakge.json
 
{
  "name": "opencv-wasm",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@dalongrong/opencv-wasm": "^4.8.1-1",
    "jimp": "^0.22.10"
  }
}
  • demo.js
    主要是基于opencv 进行特征匹配,然后进行框选标记
 
const Jimp = require('jimp');
const { cv, cvTranslateError } = require('@dalongrong/opencv-wasm'); // replace with require('opencv-wasm') in prod
 
(async () => {
    try {
        const imageSource = await Jimp.read(__dirname + '/image-sample-2.png');
        const imageTemplate = await Jimp.read(__dirname + '/image-sample-2-template.png');
 
        let src = cv.matFromImageData(imageSource.bitmap);
        let templ = cv.matFromImageData(imageTemplate.bitmap);
        let processedImage = new cv.Mat();
        let mask = new cv.Mat();
 
        cv.matchTemplate(src, templ, processedImage, cv.TM_CCOEFF_NORMED, mask);
        cv.threshold(processedImage, processedImage, 0.999, 1, cv.THRESH_BINARY);
        processedImage.convertTo(processedImage, cv.CV_8UC1);
 
        let contours = new cv.MatVector();
        let hierarchy = new cv.Mat();
 
        cv.findContours(processedImage, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);
        for (let i = 0; i < contours.size(); ++i) {
            let countour = contours.get(i).data32S; // Contains the points
            let x = countour[0];
            let y = countour[1];
 
            let color = new cv.Scalar(0, 255, 0, 255);
            let pointA = new cv.Point(x, y);
            let pointB = new cv.Point(x + templ.cols, y + templ.rows);
            cv.rectangle(src, pointA, pointB, color, 2, cv.LINE_8, 0);
        }
 
        new Jimp({
            width: src.cols,
            height: src.rows,
            data: Buffer.from(src.data)
        })
            .write(__dirname + '/template-matching.png');
 
    } catch (err) {
        console.log(cvTranslateError(cv, err));
    }
})();

效果

说明

基于webassembly 版本的opencv 可以方便进行nodejs 的图像处理,目前不太好的是对于ts 的提示支持的不太好,可以自己开发

参考资料

https://github.com/jimp-dev/jimp
https://github.com/echamudi/opencv-wasm
https://www.npmjs.com/package/@dalongrong/opencv-wasm
https://github.com/rongfengliang/opencv_waam_learning