# @autonomdev/ngx-document-scanner

> Angular 2+ component for cropping and enhancing images of documents

Latest version **1.0.10** (published 2021-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @autonomdev/ngx-document-scanner
pnpm add @autonomdev/ngx-document-scanner
yarn add @autonomdev/ngx-document-scanner
bun add @autonomdev/ngx-document-scanner
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2021-08-11 |
| First published | 2021-08-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | RoiP |
| Maintainers | elias03 |
| Keywords | opencv, camscanner, scanner, image processing, document, angular, OpenCVJS, image manipulation, crop |

## Links

- npm: https://www.npmjs.com/package/@autonomdev/ngx-document-scanner
- 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/@autonomdev/ngx-document-scanner

## Dependencies (6)

- [tslib](https://npm.io/package/tslib.md) ^1.10.0
- [ngx-opencv](https://npm.io/package/ngx-opencv.md) 2.0.1
- [@angular/cdk](https://npm.io/package/@angular/cdk.md) ~9.2.4
- [@angular/material](https://npm.io/package/@angular/material.md) ^9.2.4
- [angular2-draggable](https://npm.io/package/angular2-draggable.md) ^2.3.2
- [@angular/flex-layout](https://npm.io/package/@angular/flex-layout.md) ^9.0.0-beta.31

## 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

- 1.0.10 (latest) — 2021-08-11
- 1.0.9 — 2021-08-11

## README

# Ngx Document Scanner  
  
An Angular component for cropping and enhancing images of documents, for implementation on a mobile or desktop app.  
It uses a [WASM](https://webassembly.org/) build of [OpenCV](https://opencv.org/) to manipulate images, to achieve near-native performance. 
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 **[here](https://roiperlman.github.io/ngx-document-scanner)**

## Installation & Setup
install the package via npm

    npm install ngx-document-scanner --save

the UI is based on `@angular/material`, if you don't have it installed:

    ng add @angular/material 

choose 'yes' when prompted if you wish to add angular animations as it is needed for some of the components.

##### Configure OpenCV 
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 package to your `app.module`. you'll need to configure the location of the open cv files.
	
    import {OpenCVConfig} from 'ngx-document-scanner';
    import {NgxDocumentScannerModule} from 'ngx-document-scanner';
    
    // set the location of the OpenCV files
    const openCVConfig: OpenCVConfig = {
	  openCVDirPath: '/assets/opencv'  
	};
	
    @NgModule({ imports: 
      [NgxDocumentScannerModule.forRoot(openCVConfig)],
      bootstrap: [AppComponent]  
    })
    export class AppModule { }

## Usage

#### add component to template and bind to inputs and outputs.

    <ngx-doc-scanner 
         *ngIf="image"
         [file]="image"
         [config]="config">
         (editResult)="editResult($event)"
         (exitEditor)="exitEditor($event)"
         (error)="onError($event)"
         (processing)="editorState($event)"
    </ngx-doc-scanner>

#### set configuration options. for example:

    config: DocScannerConfig = {  
	    editorBackgroundColor: '#fafafa', 
	    buttonThemeColor: 'primary',  
	    cropToolColor: '#ff4081',  
	    cropToolShape: 'circle',
	    exportImageIcon: 'cloud_download'  
    };

## Component I\O
### Inputs
	
|input|type|description|
|--|--|--|
| **file** | `File` | sets an image for editing |
| **config** | `DocScannerConfig` | configuration object for the component. see [section](#config) dedicated to te config object. |

### Outputs

|output|type|description|
|--|--|--|
| **error** | `EventEmitter<any>` | fires on error |
| **editResult** | `EventEmitter<Blob>` | fires when the users submits the image |
|**exitEditor**| `EventEmitter<any>`| fires when the user exits the editor|
|**processing**|`EventEmitter<boolean>`|fires true when the editor is prcessing or loading\parsing the OpenCV module.


<a id="config"></a>
## Configuration Object
optional configuration values that can be passed to the component. 

    import {DocScannerConfig} form 'ngx-document-scanner'
    config: DocScannerConfig = {
	    ....
    }

| property | type | description |
|--|--|--|
|**buttonThemeColor** | "primary" &#124; "warn" &#124; "accent"  | material design theme color name  for the buttons on the component|
|**cropToolColor**|`string`|color of the crop tool (points and connecting lines)  |
|**cropToolDimensions**  | `{width: number; height: nubmer;}`| width and height of the crop tool points|
|**cropToolLineWeight**  |`number`|weight of the crop tool's connecting lines  |
|**cropToolShape**|`'rect' &#124; 'circle'`|shape of the crop tool points  |
|**editorBackgroundColor**|`string`|background color of the main editor div  |
|**editorDimensions** | an object of css keys value pairs| css properties for the main editor div  |
|**exportImageIcon**  |`string`| icon for the button that completes the editing and emits the edited image.|
**extraCss**|an object of css keys value pairs|css that will be added to the main div of the editor component |
|**maxImageDimensions**  | `{width: number; height: nubmer;}` | max dimensions of oputput image. if set to zero will not resize the image.|
|**maxPreviewWidth**  | `number`|max width of the preview pane|

## Ngx-OpenCV
The angular service used to load the open cv library and monitor it's state is also available as a standalone package: [NgxOpenCV](https://www.npmjs.com/ngx-opencv)

## License  
  
This project is licensed under the MIT License.

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