Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michaelvilleneuve/react-native-document-scanner
Document scanner, features live border detection, perspective correction, image filters and more ! 📲📸
https://github.com/michaelvilleneuve/react-native-document-scanner
document ios react-native scanner
Last synced: 2 days ago
JSON representation
Document scanner, features live border detection, perspective correction, image filters and more ! 📲📸
- Host: GitHub
- URL: https://github.com/michaelvilleneuve/react-native-document-scanner
- Owner: Michaelvilleneuve
- License: mit
- Created: 2017-06-23T07:11:35.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-24T22:28:20.000Z (almost 2 years ago)
- Last Synced: 2025-01-14T23:43:54.167Z (9 days ago)
- Topics: document, ios, react-native, scanner
- Language: Java
- Homepage:
- Size: 82 MB
- Stars: 852
- Watchers: 29
- Forks: 290
- Open Issues: 56
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Native Document Scanner
Live document detection library. Returns either a URI or a base64 encoded string of the captured image, allowing you to easily store it or use it as you wish !
Features :
- Live detection
- Perspective correction and crop of the image
- Live camera filters (brightness, saturation, contrast)
- Flash
- Easy to use base64 image
#### Can be easily plugged with [react-native-perspective-image-cropper](https://github.com/Michaelvilleneuve/react-native-perspective-image-cropper)
## Both Platform
Use version >=1.4.1 if you are using react-native 0.48+
`$ yarn add https://github.com/Michaelvilleneuve/react-native-document-scanner`
`$ react-native link react-native-document-scanner`
Edit the `info.plist` file in XCode and add the following permission : `NSCameraUsageDescription`
Remember, this library uses your device camera, you can't run it on a simulator.
### Android Only
If you do not have it already in your project, you must link openCV in your `settings.gradle` file
```java
include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-document-scanner/android/openCVLibrary310')
```
#### In android/app/src/main/AndroidManifest.xml
Change manifest header to avoid "Manifest merger error". After you add `xmlns:tools="http://schemas.android.com/tools"` should look like this:
```
```
Add `tools:replace="android:allowBackup"` in
```
Add Camera permissions request:
```
```
## Usage
```javascript
import React, { Component } from "react";
import { View, Image } from "react-native";
import DocumentScanner from "react-native-document-scanner";
class YourComponent extends Component {
render() {
return (
this.setState({
image: data.croppedImage,
initialImage: data.initialImage,
rectangleCoordinates: data.rectangleCoordinates
})
}
overlayColor="rgba(255,130,0, 0.7)"
enableTorch={false}
brightness={0.3}
saturation={1}
contrast={1.1}
quality={0.5}
onRectangleDetect={({ stableCounter, lastDetectionType }) =>
this.setState({ stableCounter, lastDetectionType })
}
detectionCountBeforeCapture={5}
detectionRefreshRateInMS={50}
onPermissionsDenied={() => console.log("Permissions Denied")}
/>
);
}
}
```
## Properties
| Prop | Platform | Default | Type | Description |
| :-------------------------- | :------: | :-----: | :-------: | :---------------------------------------------------------------- |
| overlayColor | Both | `none` | `string` | Color of the detected rectangle : rgba recommended |
| detectionCountBeforeCapture | Both | `5` | `integer` | Number of correct rectangle to detect before capture |
| detectionRefreshRateInMS | iOS | `50` | `integer` | Time between two rectangle detection attempt |
| enableTorch | Both | `false` | `bool` | Allows to active or deactivate flash during document detection |
| useFrontCam | iOS | `false` | `bool` | Allows you to switch between front and back camera |
| brightness | iOS | `0` | `float` | Increase or decrease camera brightness. Normal as default. |
| saturation | iOS | `1` | `float` | Increase or decrease camera saturation. Set `0` for black & white |
| contrast | iOS | `1` | `float` | Increase or decrease camera contrast. Normal as default |
| quality | iOS | `0.8` | `float` | Image compression. Reduces both image size and quality |
| useBase64 | iOS | `false` | `bool` | If base64 representation should be passed instead of image uri's |
| saveInAppDocument | iOS | `false` | `bool` | If should save in app document in case of not using base 64 |
| captureMultiple | iOS | `false` | `bool` | Keeps the scanner on after a successful capture |
| onPermissionsDenied | android | `null` | `func` | Function to call when the Android permissions are denied |
## Manual capture
- First get component ref
```javascript
(this.scanner = ref)} />
```
- Then call :
```javascript
this.scanner.capture();
```
## Each rectangle detection (iOS only)
| Props | Params | Type | Description |
| ----------------- | -------------------------------------- | -------- | ----------- |
| onRectangleDetect | `{ stableCounter, lastDetectionType }` | `object` | See below |
The returned object includes the following keys :
- `stableCounter`
Number of correctly formated rectangle found (this number triggers capture once it goes above `detectionCountBeforeCapture`)
- `lastDetectionType`
Enum (0, 1 or 2) corresponding to the type of rectangle found
0. Correctly formated rectangle
1. Wrong perspective, bad angle
1. Too far
## Returned image
| Prop | Params | Type | Description |
| :------------- | :----: | :------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| onPictureTaken | `data` | `object` | Returns the captured image in an object `{ croppedImage: ('URI or BASE64 string'), initialImage: 'URI or BASE64 string', rectangleCoordinates: 'object of coordinates' }` |
## Save in app document
If you want to use saveInAppDocument options, then don't forget to add those raws in .plist :
```xml
LSSupportsOpeningDocumentsInPlace
```