@datobs/react-native-perspective-image-cropper
v0.4.12
Published
React native library allowing you to make custom crop and perspective corrections on photos
Downloads
13
Readme
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>
);
}
}