Skip to content

Latest commit

 

History

History
106 lines (84 loc) · 4.2 KB

README.md

File metadata and controls

106 lines (84 loc) · 4.2 KB

React Native perspective image cropper 📐🖼

This version introduces a nativeDriver property to fix the "Animated event now requires a second argument for options" warning and optimizes memory leaks by properly releasing images after cropping.

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 @ertan95/react-native-perspective-image-cropper --save

$ cd ios && pod install && cd ..

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

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