ngx-opencv

Ngx OpenCv

NgxOpenCV is a lightweight angular service for integrating OpenCV.js WASM in Angular 2+ applications.
OpenCV on WASM offers near-native performance in web-based applications;
The service loads the library in the angular zone, thus enabling better control over it's state. Note that there are a few extra steps required to configure the component other than installing the package from npm.

Live Demo

View a live demo of an implementation of this library in another project - here

Installation & Setup

install the package via npm

npm install ngx-opencv --save

copy the opencv.js files to your assets folder (or any other folder). you can build the files yourself (instructions on the OpenCV site), or download them from this package's repository. both opencv.js & opencv_js.wasm need to placed in the same folder.

import the module to your app.module. you'll need to configure the location of the open cv files.

import {OpenCVConfig} from 'ngx-document-scanner';
import {NgxOpencv} from 'ngx-opencv';

// set the location of the OpenCV files
const openCVConfig: OpenCVConfig = {
  openCVDirPath: '/assets/opencv'  
};

@NgModule({ imports: [
  NgxOpenCVModule.forRoot(openCVConfig)
],
  bootstrap: [AppComponent]  
})
export class AppModule { }

You'll need to set 'cv' as a global variable, or on the component level:

declare var cv: any; 

this is very important to avoid TypeScript errors.

Usage

Inject NgxOpenCVService to the constructor of your component / service etc. and subscribe to the cvState observable.

	constructor(private ngxOpenCv: NgxOpenCVService) {  
	  // subscribe to status of OpenCV module  
	  this.ngxOpenCv.cvState.subscribe(
	    (cvState: OpenCVState) => {  
	      // do something with the state string
	      this.cvState = cvState.state;  
	      if (cvState.error) {
	        // handle errors
	      } else if (cvState.loading) {
	        // e.g. show loading indicator  
	      } else if (cvState.ready) {  
	        // do image processing stuff
	      }  
	  });
	}

Note that loading and parsing of the OpenCV library is done synchronously, and might take some time while blocking execution of other processes, depending on client's device. Therefore it's recommended to bind a loading indicator to the state observable.

The observable emits an OpenCVState object when changes occur, with the following properties:

property	type	description
loading	boolean	true when loading of the opencv lib. is initiated, until it's completion callback is fires or the listener pick up an error
error	boolean	true when an error is picked up by the listener
ready	boolean	true when loading and parsing was copleted
state	string	indicates the current state of the module as a string

Configuration Options

You can configure the service with the OpenCVConfig object

import {OpenCvConfig} from 'ngx-document-scanner';

property	type	description
openCVDirPath	string	path to the directory containing the OpenCV files, in the form of '/path/to/[opencv directory]'. directory must contain opencv.js & opencv_js.wasm.
runOnOpenCVInit	Function	additional callback that will run when OpenCv has finished loading and parsing. callback runs in the angular zone in the context of the service.