Cropping by top corners about react-image-crop HOT 13 CLOSED

@Janekk That's strange, I can't replicate it - what version are you using and what crop params did you use? If you open demo/index.html do you get the same behaviour?

from react-image-crop.

Just stumbled upon that in my React component, pretty basic one:

  constructor() {
    super();

    this.state = {
      dataUrl: null
    };

    this.crop = {
      x: 20,
      y: 10,
      width: 60,
      aspect: 3 / 4
    };
  }

  render() {
    var {dataUrl} = this.state;
    return (
      <div>
        <input type="file" onChange={this.onFileChange.bind(this)}/>
        {dataUrl ?
          <ReactCrop crop={this.crop} src={dataUrl} onComplete={this.onCropComplete.bind(this)}/>
          : null
        }
      </div>
    );
  }

Will try to test it in isolation to be sure that nothing from my project influences that behavior. Btw. @dominictobias how can I run your demo? I started it with npm dev, webpack has started, but what url/port is it running on? Thanks

from react-image-crop.

Thanks I'll check this probably tomorrow. To run that that (without wanting
to modify the source) simply open up index.html - no need to start a server

On Friday, 22 January 2016, Janusz Kacalak [email protected] wrote:

Just stumbled upon that in my React component, pretty basic one:

constructor() {
super();

this.state = {
  dataUrl: null
};

this.crop = {
  x: 20,
  y: 10,
  width: 60,
  aspect: 3 / 4
};

}

render() {
var {dataUrl} = this.state;
return (

{dataUrl ?

: null
}

);
}

Will try to test it in isolation to be sure that nothing from my project
influences that behavior. Btw. @dominictobias
https://github.com/DominicTobias how can I run your demo? I started it
with npm dev, webpack has started, but what url/port is it running on?

—
Reply to this email directly or view it on GitHub
#14 (comment)
.

from react-image-crop.

I think I know what's going on with this issue.
Probably the image you're using is bigger in width than height.
But you're forcing the width to be 60% and letting react-image-crop to figure out the height. (Which will most likely be outside of the boundaries)
Take a look at the gif

A work around for this is to figure out before hand which values to pass to react-image-crop. Either pass width or height when the aspect is set, but don't do both.

from react-image-crop.

@Janekk can you tell by the gif if those were the problems you were experiencing?

from react-image-crop.

Thanks for the investigation @DPr00f , even if it's not that it's a good catch

from react-image-crop.

@DPr00f actually it was a vertical image, so it should be ok with settings from my snippet. I'll take a look today again

from react-image-crop.

@Janekk if you still have the problem please link to the image here and I'll try with those settings

from react-image-crop.

@dominictobias @DPr00f the problem turned out to be quite simple one to reproduce. Try adding something to the demo page above the file input, that takes some vertical space, so that you have scroll to the image crop area. Then try dragging the top corners. It might be something with the offset calculation (getElementOffset?)

from react-image-crop.

Thanks that sounds easy to reproduce, I'll take a look later

from react-image-crop.

Fixed in 0.1.0

from react-image-crop.

Nice. Good job Dominic

from react-image-crop.

Thank you Dominic

from react-image-crop.