React Native perspective image cropper 📐 🖼
A component that allows you to perform custom image crop and perspective correction !
Designed to work with React Native Document Scanner
https://github.com/Michaelvilleneuve/react-native-document-scanner
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
<CustomCrop ref={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 ( <View> <CustomCrop updateImage={this.updateImage.bind(this)} rectangleCoordinates={this.state.rectangleCoordinates} initialImage={this.state.initialImage} height={this.state.imageHeight} width={this.state.imageWidth} ref={ref => (this.customCrop = ref)} overlayColor="rgba(18,190,210, 1)" overlayStrokeColor="rgba(20,190,210, 1)" handlerColor="rgba(20,150,160, 1)" enablePanStrict={false} /> <TouchableOpacity onPress={this.crop.bind(this)}> <Text>CROP IMAGE</Text> </TouchableOpacity> </View> ); } }
