opencv wasm 试用

基于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