ggunti / react-native-amazing-cropper

Image cropper for react native using Animated API
MIT License
145 stars 83 forks source link

Custom uri from camera doesnt crop image properly #12

Closed KeiShadow closed 5 years ago

KeiShadow commented 5 years ago

Hello, im using your example code in my project but there is a problem, when i select image in croper, the croper doesnt crop this image properly. Im using image from taken photo in RNCamera pass an uri into your component. There is an code: `class AmazingCropperPage extends Component<Props, State> {

state={
    uri: undefined,
    width: undefined,
    height: undefined
}

componentDidMount(){
    var object = this.props.navigation.getParam("image");
    console.log(`object: ${object}`);
    this.setState({
        uri: object.uri,
        height: object.height,
        width: object.width
    })
}

onDone = (croppedImageUri: any) => {
  console.log('croppedImageUri = ', croppedImageUri);
  if (Platform.OS === 'ios') {
    ImageStore.getBase64ForTag(
      croppedImageUri,
      (base64Image) => {
        // send image to server or save it locally
        ImageStore.removeImageForTag(croppedImageUri);
      },
      (err) => {}
    );
  }
  else {

    // send image to server
     this.props.navigation.navigate('CameraUp', {image: croppedImageUri})
  }
  // navigate to the next page of your application

 // Actions.home();
}

onCancel = () => {
  // navigate back
  //Actions.pop();
}

render() {

    if(this.state.uri !== undefined && this.state.width !== undefined && this.state.height !== undefined){
        return (
            <AmazingCropper
                onDone={this.onDone}
                onCancel={this.onCancel}
                imageUri={this.state.uri}
                imageWidth={this.state.width}
                imageHeight={this.state.height}
                NOT_SELECTED_AREA_OPACITY={0.5}
                BORDER_WIDTH={25}
            />
            );
      }else{
            return Indicators.loadingIndicator({ flex: 1, justifyContent: 'center', alignItems: 'center' },{size: 24, color:"#FF8A65"}, "loading...")

      }

}

}

export default AmazingCropperPage` This is on just android. This is a picture taken from RNCamera: ReactNative_rotated_image_3775506894312755654 I choose this area to crop: ReactNative_rotated_image_3775506894312755654 But this is the image from onDone when is crop done: ReactNative_cropped_image_5786879454378422093

KeiShadow commented 5 years ago

There is a right code which working on both android and ios: ` type State={ image?: string, imageHeight?: number, imageWidth?: number, } type Props ={ navigation: NavigationScreenProp<any,any> }

class AmazingCropperPage extends Component<Props, State> { constructor(props: Props){ super(props);

    this.state={
       // image: '',

    }
}
componentDidMount(){
    var object = this.props.navigation.getParam("image");
    this.setState({
        image: object.uri,
        imageHeight: object.height,
        imageWidth: object.width
    })
}

onDone = (croppedImageUri: any) => {
  console.log('croppedImageUri = ', croppedImageUri);
  if (Platform.OS === 'ios') {
    ImageStore.getBase64ForTag(
      croppedImageUri,
      (base64Image) => {
        // send image to server or save it locally
        //ImageStore.removeImageForTag(croppedImageUri);
      },
      (err) => {}
    );
  }
  else {

    // send image to server
  }
  // navigate to the next page of your application
  this.props.navigation.navigate('CameraUp', {image: croppedImageUri})
 // Actions.home();
}

onCancel = () => {
  // navigate back
  //Actions.pop();
}

render() {
  if(this.state.image === undefined || this.state.imageHeight === undefined || this.state.imageWidth === undefined) {
    return(
      <View></View>
    )
  }
  return (
    <AmazingCropper
      onDone={this.onDone}
      onCancel={this.onCancel}
      imageUri={this.state.image}
      imageWidth={this.state.imageWidth} // 1600
      imageHeight={this.state.imageHeight} // 2396
      NOT_SELECTED_AREA_OPACITY={0.3}
      BORDER_WIDTH={20}
      footerComponent={<DefaultFooter doneText='OK' rotateText='ROT' cancelText='BACK' />}
    />
  );
}

}

export default AmazingCropperPage `