Wrong crop of image about react-native-image-editor HOT 13 CLOSED

export default function cropImage(imageURI, imageWidth, imageHeight, x, y) {
  let screenWidth = PixelRatio.getPixelSizeForLayoutSize(
    Dimensions.get('window').width,
  );
  let screenHeight = PixelRatio.getPixelSizeForLayoutSize(
    Dimensions.get('window').height,
  );

  let scaleFactor = imageHeight / screenHeight;

  x *= scaleFactor;
  y *= scaleFactor;
  screenWidth *= scaleFactor;
  screenHeight *= scaleFactor;

  let newSize = 8 * scaleFactor;

  let offsetX = (imageWidth - screenWidth) / 2 + (x - newSize / 2);
  let offsetY = y - newSize / 2;

  const cropData = {
    offset: {
      x: offsetX,
      y: offsetY,
    },
    size: {
      width: newSize,
      height: newSize,
    },
  };

  return ImageEditor.cropImage(imageURI, cropData);
}

takePicture = async () => {
    if (this.camera) {
      const options = {
        quality: 0.5,
        base64: true,
      };
      this.camera
        .takePictureAsync(options)
        .then((capturedImg) => {
          // 2a) Extract a reference to the captured image,
          //    along with its natural dimensions
          const {uri, width, height} = capturedImg;
          console.log(capturedImg);
          console.log('Capture uri:', uri);
          console.log('Capture width heigth:', width, height);
          console.log('X: ', this.state.captureBoxXAxis);
          console.log('Y: ', this.state.captureBoxYAxis);
         
          let imageHeight = PixelRatio.getPixelSizeForLayoutSize(height);
          let imageWidth = PixelRatio.getPixelSizeForLayoutSize(width);
          cropImage(uri, imageWidth, imageHeight, this.state.captureBoxXAxis,this.state.captureBoxYAxis).then((url) => {

            console.log('Cropped image uri', url);
              this.setState({ image: url });
          });
     
        })
        .catch((error) => {
          console.log('Could not capture image.', error);
        });
    }
  };
}

function cropImage(imageURI, imageWidth, imageHeight, x, y) {
  let screenWidth = PixelRatio.getPixelSizeForLayoutSize(
    Dimensions.get('window').width,
  );
  let screenHeight = PixelRatio.getPixelSizeForLayoutSize(
    Dimensions.get('window').height,
  );

  let scaleFactor = imageHeight / screenHeight;

  x *= scaleFactor;
  y *= scaleFactor;
  screenWidth *= scaleFactor;
  screenHeight *= scaleFactor;

  let newSize = 8 * scaleFactor;

  let offsetX = (imageWidth - screenWidth) / 2 + (x - newSize / 2);
  let offsetY = y - newSize / 2;

  const cropData = {
    offset: {
      x: offsetX,
      y: offsetY,
    },
    size: {
      width: newSize,
      height: newSize,
    },
  };

  return ImageEditor.cropImage(imageURI, cropData);
}

  handleLayoutChange() {

    this.myComponent.measure( (fx, fy, width, height, px, py) => {

      this.setState({
        captureBoxXAxis: px,
        captureBoxYAxis: py,
        captureBoxWidth: width,
        captureBoxHeight: height,
      });

    })        
  }

 return (
        <SafeAreaView style={styles.safeAreaContainer}>
          <RNCamera
            ref={(ref) => {
              this.camera = ref;
            }}
            style={styles.cameraStyle}
            type={this.state.type}
            flashMode={this.state.flash}
            androidCameraPermissionOptions={{
              title: 'Permission to use camera',
              message: 'We need your permission to use your camera',
              buttonPositive: 'Ok',
              buttonNegative: 'Cancel',
            }}
            androidRecordAudioPermissionOptions={{
              title: 'Permission to use audio recording',
              message: 'We need your permission to use your audio',
              buttonPositive: 'Ok',
              buttonNegative: 'Cancel',
            }}>
            <View style={styles.mainContainer}>
              <View
                style={[
                  { height: maskTopRowHeight },
                  styles.maskRow,
                  styles.maskFrame,
                ]}>
                <Text style={styles.titleLabel}>Back Image</Text>
              </View>
              <View style={[styles.maskCenter]}>
                <View style={[{ width: maskColWidth }, styles.maskFrame]} />
                <View
                ref={view => { this.myComponent = view; }}
                  style={styles.boxContainer}
                  onLayout={(event) => this.handleLayoutChange(event)} >
                  <Text style={styles.topLabel}>Top of Card</Text>
                  <Text style={styles.bottomLabel}>Bottom of Card</Text>
                </View>
                <View style={[{ width: maskColWidth }, styles.maskFrame]} />
              </View>
              <View
                style={[
                  { height: maskBottomRowHeight },
                  styles.maskRow,
                  styles.maskFrame,
                ]}>
                <View style={styles.actionContainer}>
                  <TouchableOpacity
                    onPress={this.takePicture.bind(this)}
                    style={styles.captureContainer}>
                    <Image
                      source={require('../images/circle-camera.png')}
                      size={26}
                      style={[styles.clickButton]}
                    />
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={styles.flashContainer}
                    onPress={this.toggleFlash.bind(this)}>
                    <Image
                      source={
                        this.state.flash === 'on'
                          ? require('../images/flash-on.png')
                          : require('../images/flash-off.png')
                      }
                      size={26}
                      style={[styles.flashButton]}
                    />
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </RNCamera>
        </SafeAreaView>
      );

if (Platform.OS === 'android') {
          const xFactor = Dimensions.get('screen').scale;
          const yFactor = Dimensions.get('screen').scale;
          imageWidth = imageWidth * xFactor;
          imageHeight = imageHeight * yFactor;
          cropData = {
            offset: { x: cropOffset.x * xFactor, y: cropOffset.y * yFactor },
            size: { width: imageWidth, height: imageHeight },
          };
        }

handleLayoutChange(event) {
	    this.myComponent.measure( (fx, fy, width, height, px, py) => {
		    this.setState({
			captureBoxXAxis: px,
		        captureBoxYAxis: py,
		        captureBoxWidth: width,
		        captureBoxHeight: height,
	         });
	    })        
    }
const width = Dimensions.get('window').width
const height = Dimensions.get('window').height
const cropData = {
   offset: {x: ((this.state.captureBoxXAxis)/width)*imageWidth, y:((this.state.captureBoxYAxis)/height)*imageHeight},
   size: {width: ((this.state.captureBoxWidth)/width)*imageWidth, height: this.state.captureBoxHeight/height*imageHeight},
};
ImageEditor.cropImage(imageURI, cropData)