Need help with react-native-perspective-image-cropper?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Michaelvilleneuve
221 Stars 91 Forks MIT License 42 Commits 25 Opened issues

Description

Perform custom crop, resizing and perspective correction 📐🖼

Services available

!
?

Need anything else?

Contributors list

# 44,340
React
Java
React N...
Objecti...
28 commits
# 398,540
PHP
Symfony
google-...
Objecti...
1 commit

React Native perspective image cropper 📐🖼

A component that allows you to perform custom image crop and perspective correction !

Demo image

Designed to work with React Native Document Scanner

https://github.com/Michaelvilleneuve/react-native-document-scanner

Demo gif

Installation 🚀🚀

$ npm install react-native-perspective-image-cropper --save

$ react-native link react-native-perspective-image-cropper

This library uses react-native-svg, you must install it too. See https://github.com/react-native-community/react-native-svg for more infos.

Android Only

If you do not already have openCV installed in your project, add this line to your

settings.gradle
include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-perspective-image-cropper/android/openCVLibrary310')

Crop image

  • First get component ref
 (this.customCrop = ref)} />
  • Then call :
this.customCrop.crop();

Props

| Props | Type | Required | Description | | ---------------------- | ------------------ | -------- | --------------------------------------------------------------------------------------- | |

updateImage
|
Func
| Yes | Returns the cropped image and the coordinates of the cropped image in the initial photo | |
rectangleCoordinates
|
Object
see usage | No | Object to predefine an area to crop (an already detected image for example) | |
initialImage
|
String
| Yes | Base64 encoded image you want to be cropped | |
height
|
Number
| Yes | Height of the image (will probably disappear in the future | |
width
|
Number
| Yes | Width of the image (will probably disappear in the future | |
overlayColor
|
String
| No | Color of the cropping area overlay | |
overlayStrokeColor
|
String
| No | Color of the cropping area stroke | |
overlayStrokeWidth
|
Number
| No | Width of the cropping area stroke | |
handlerColor
|
String
| No | Color of the handlers | |
enablePanStrict
|
Bool
| No | Enable pan on X axis, and Y axis |

Usage

import CustomCrop from "react-native-perspective-image-cropper";

class CropView extends Component { componentWillMount() { Image.getSize(image, (width, height) => { this.setState({ imageWidth: width, imageHeight: height, initialImage: image, rectangleCoordinates: { topLeft: { x: 10, y: 10 }, topRight: { x: 10, y: 10 }, bottomRight: { x: 10, y: 10 }, bottomLeft: { x: 10, y: 10 } } }); }); }

updateImage(image, newCoordinates) { this.setState({ image, rectangleCoordinates: newCoordinates }); }

crop() { this.customCrop.crop(); }

render() { return ( (this.customCrop = ref)} overlayColor="rgba(18,190,210, 1)" overlayStrokeColor="rgba(20,190,210, 1)" handlerColor="rgba(20,150,160, 1)" enablePanStrict={false} /> CROP IMAGE ); } }

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.