Pixel coords for the image crop about react-image-crop HOT 7 CLOSED

Doing this is really easy. Here's how my component looks:

getBase64(file) {
    this.setState({ loading: true, file });

    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      var image = new Image();
      image.src = reader.result;

      image.onload = () => {
        this.setState({
          loading: false,
          image: reader.result,
          height: image.height,
          width: image.width,
        });
      };
    };
    reader.onerror = error => console.log('Error: ', error);
  }

Get the base64 of a file object, render it to an image, get the height and width. Then, pass the height and width to your cropper props, something like this:

          minWidth: 1920 / image.width * 100,
          minHeight: 350 / image.height * 100,
          maxWidth: 1920 / image.width * 100,
          maxHeight: 350 / image.height * 100,
   

Now you have percentages from pixels, for anyone else who needs it :)

from react-image-crop.

Hi @riccardolorenzon updating the README was confusing because that version isn't released yet. RC7 only passes the normal crop object. If you want it to pass pixels then your should also pass the outputPixelUnits prop. At the moment there is no way to pass pixels in because it would require another property or for values to specify a unit e.g. instead of 220 it would be 220px as there is no way to determine whether the passed in values are pixels or percentages. I'll consider it for the next version though. In the mean time you could do the calculation yourself to convert pixels to percentages.

from react-image-crop.

hi @dominictobias, thank you for the quick reply.

Any suggestions on how to get the natural height and width of the image without loading it again?

from react-image-crop.

I used the natualHeight and naturalWidth img properties: http://www.w3schools.com/jsref/prop_img_naturalheight.asp

from react-image-crop.

I just updated the component to the last version.

Is it now possible to specify the crop coordinates using pixels? i can't find that part on the docs.

from react-image-crop.

Hi @riccardolorenzon no there isn't and there is no intention of adding this, most other cropping tools out there use pixels so if you prefer that you might be better off with them (it would complicate the code base too much to add support for both). The point of using percentages is so that when the crop is resized it is still correct (responsive) - there is no need to write an algorithm to detect if the crop element resizes, poll for it, and recalc the crop. This makes it smoother and the code simpler (it just works), the drawback is that if you want to pass pixels in then you have to calc them to percentage - which would be pretty trivial to do. Although you do get passed the pixels in onComplete and onChange for convenience of passing that to e.g. a backend, you are still supposed to pass in percentages.

PS if pixelCrop is undefined though, that's a bug, but I think that's working

from react-image-crop.

I used the natualHeight and naturalWidth img properties: http://www.w3schools.com/jsref/prop_img_naturalheight.asp

Getting naturalWidth and naturalHeight as 0, any idea why?

from react-image-crop.