Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cropping not correct

See original GitHub issue

react-native: 0.60.5 react-native-perspective-image-cropper": "^0.4.4

Original: Screenshot_20200220-164834_Straight_Line 1

Selected coords: Screenshot_20200220-165037_Straight_Line 1

Result: Screenshot_20200220-165046_Straight_Line 1

constructor(props) {
    super(props)
    this.state = {
      enableExtract: false,
    }
    this.updateImage = this.updateImage.bind(this)
    this.crop = this.crop.bind(this)
  }

  componentDidMount() {
    let image = this.props.navigation.getParam('image')

    Image.getSize(image, (width, height) => {
      this.setState({
        imageWidth: width,
        imageHeight: height,
        initialImage: image,
        rectangleCoordinates: {
          topLeft: { x: 50, y: 50 },
          topRight: { x: 50, y: 50 },
          bottomRight: { x: 50, y: 50 },
          bottomLeft: { x: 50, y: 50 },
        }
      })
    })
  }

  updateImage(image, newCoordinates) {
    this.setState(
      {
        image,
        rectangleCoordinates: newCoordinates,
      },
      () => {
        this.props.navigation.navigate('CropResult', { cropImage: this.state.image })
      }
    )
  }

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

<CustomCrop
              updateImage={this.updateImage}
              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}
            />

Any idea how to fix this?

Issue Analytics

State:
Created 4 years ago
Comments:11

Top GitHub Comments

6reactions

maknom66commented, Feb 25, 2020

I faced the same issue and since no one replied i tried to fix it myself and after many hours of trial and error i did managed to fix it and enhanced the usage, use this modified component for testing

react-native-perspective-image-cropper.zip

Make sure to change android/settings.gradle to point to the folder where you have pasted the component for e.g

include ':rreact-native-perspective-image-cropper' project(':react-native-perspective-image-cropper').projectDir = new File(rootProject.projectDir, '../src/components/react-native-document-scanner/android')

and change import statement to

import CustomCrop from "../../components/react-native-perspective-image-cropper"

If your issue is fixed as well, i can make a PR

3reactions

hashimkhatricommented, Mar 29, 2020

@maknom66 IOS still same issue please help.