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>
    );
  }
}