13

Document scanner with border detection and custom crop/resize for react native

 3 years ago
source link: https://reactnativeexample.com/document-scanner-with-border-detection-and-custom-crop-resize-for-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

react-native-document-scanner

Document scanner with border detection, perspective correction and custom crop/resize.

ios

Android

android

Mostly automatic installation

$ react-native link react-native-document-scanner

Manual installation

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-document-scanner and add RNDocumentScanner.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNDocumentScanner.a to your project's Build PhasesLink Binary With Libraries
  4. Add OpenCV in your Podfile :
    ...
      # Pods for [your project]
      pod 'libopencv-contrib', '~> 3.4.1'
    end
    
  5. Run pod install in your ios folder
  6. Run your project (Cmd+R)<

Android

  1. Open up android/app/src/main/java/[...]/MainActivity.java
  • Add import com.ubidreams.RNDocumentScanner.RNDocumentScannerPackage; to the imports at the top of the file
  • Add new RNDocumentScannerPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-document-scanner'
    project(':react-native-document-scanner').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-document-scanner/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile project(':react-native-document-scanner')
    

Dependencies

Usage

import RNDocumentScanner from 'react-native-document-scanner'

render () {
  return (
    <View style={styles.container}>
      <RNDocumentScanner />
    </View>
  )
}
JavaScript

GitHub

https://github.com/AugustoPinheiro/RN-react-native-document-scanner


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK