Cropping not correct

[armin23615]

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

Original:

Selected coords:

Result:

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?

[maknom66]

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

[armin23615]

Thank you so much, this works great!
There is just one line in index.js -> import Exif from 'react-native-exif'
It's not used anywhere and it prevents building app if 'react-native-exif' package isn't installed.

[maknom66]

Thank you so much, this works great!
There is just one line in index.js -> import Exif from 'react-native-exif'
It's not used anywhere and it prevents building app if 'react-native-exif' package isn't installed.

Oops, my bad, i was just tinkering with exif to see if it helps and forgot to remove it, glad that it worked though :)

[hashimkhatri]

@maknom66
IOS still same issue please help.

[Ahmad5448]

can any one can send source code ?

[Ahmad5448]

source code for only file where u used this component

[ambessh]

thankyou so so much @maknom66 .

[rosentoshev]

@maknom66 Did you manage to resolve this issue on iOS? Your version works really well on Android but as @hashimkhatri mentioned it is not cropping correctly on iOS.

[ssudekum]

@maknom66 Thanks so much for the fix! If you have time please make a PR. I would like to avoid manual inclusion of the resources if possible.

[NTJ3]

ould like to avoid

@maknom66 In android working fine, Having issue in iOS after capturing image from camera, While picking image from gallery in that scenario it's working fine.

++ @Michaelvilleneuve

[cdcharlebois]

please see my PR #64

[Charitrajadon]

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

Thank You you save my day