Never Pummel Muskoxen

    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    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: [
      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.


    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  
    	    (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.


    npm i ngx-opencv

    DownloadsWeekly Downloads






    Unpacked Size

    138 kB

    Total Files


    Last publish


    • roip