opencv-js

OpenCV JavaScript version (NPM package) for node.js or browser. Get started guide OpenCV.js Tutorials.

The file opencv.js was downloaded from https://docs.opencv.org/4.12.0/opencv.js

TypeScript is supported (thanks to mirada).

Basic Usage

import cvModule from "@techstark/opencv-js";

async function getOpenCv() {
  let cv;
  if (cvModule instanceof Promise) {
    cv = await cvModule;
  } else {
    if (cvModule.Mat) {
      cv = cvModule;
    } else {
      await new Promise((resolve) => {
        cvModule.onRuntimeInitialized = () => resolve();
      });
      cv = cvModule;
    }
  }
  return { cv };
}

async function main() {
  const { cv } = await getOpenCv();
  console.log("OpenCV.js is ready!");
  // You can now use OpenCV functions here
  console.log(cv.getBuildInformation());
}

main();

Code Examples

• See code examples (React, Angular, Node.js) in opencv-js-examples

Live Demo

Using in react.js project

• See live demo and code here
• Get the test image from here Lenna.png

Using in Angular project

• See code here

Real-time face detection

• See live demo and code here

How to Use

• npm install @techstark/opencv-js
• or yarn add @techstark/opencv-js
• import cv from "@techstark/opencv-js"
  • for TypeScript, set "esModuleInterop": true in tsconfig.json
• or import * as cv from "@techstark/opencv-js"

Webpack Configuration (for browser usage)

If you use this package for browsers, you need to set some polyfills. In the file “webpack.config.js”, set

module.exports = {
  resolve: {
    modules: [...],
    fallback: {
      fs: false,
      path: false,
      crypto: false
    }
  }
};

What methods and properties are available

The TypeScript type declarations may not be up to date with the latest OpenCV.js. Refer to cvKeys.json to check the available methods and properties at runtime.

Star History