# ngx-opencv

> Angular service for implementing the OpenCV library in angular based applications

Latest version **2.0.1** (published 2020-05-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-opencv
pnpm add ngx-opencv
yarn add ngx-opencv
bun add ngx-opencv
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2020-05-27 |
| First published | 2018-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 134.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | RoiP |
| Maintainers | roip |
| Keywords | opencv, camscanner, scanner, image processing, document, angular, OpenCVJS, image manipulation, crop |

## Links

- npm: https://www.npmjs.com/package/ngx-opencv
- Repository: https://github.com/roiperlman/ngx-document-scanner
- Homepage: https://github.com/roiperlman/ngx-document-scanner#readme
- Issues: https://github.com/roiperlman/ngx-document-scanner/issues
- npm.io page: https://npm.io/package/ngx-opencv

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.10.0

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2020-05-27
- 2.0.0 — 2020-05-26
- 1.0.6 — 2019-04-18
- 1.0.5 — 2018-12-21
- 1.0.4 — 2018-12-18
- 1.0.3 — 2018-12-15
- 1.0.2 — 2018-12-15
- 1.0.1 — 2018-12-15
- 1.0.0 — 2018-12-15

## README

# Ngx OpenCv
NgxOpenCV is a lightweight angular service for integrating OpenCV.js [WASM](https://webassembly.org/) 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](https://roiperlman.github.io/ngx-document-scanner)**

## 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](https://docs.opencv.org/3.4/d4/da1/tutorial_js_setup.html)), or download them from this package's [repository](https://github.com/roiperlman/ngx-document-scanner).
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.|

---
_Source: https://npm.io/package/ngx-opencv · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._