Aspect ratio in Chrome throws console errors about react-image-crop HOT 21 CLOSED

I still get this error, with the following setup:

<ReactCrop crop={{ aspect: 1, width: 100, top: 0, x: 20 }} src={newProfilePhoto.preview} />

This is in v2.0.2.

from react-image-crop.

from react-image-crop.

Hi, that's strange I'm not getting the same error with those params on OSX Chrome 50.0.2661.102 (64-bit) or 51.0.2704.79 (64-bit). What Chrome version are you using? And does it error on any image you try?

from react-image-crop.

Closing but feel free to update

from react-image-crop.

@CanadaJ I was having this issue. I later found that I was accidentally passing "1:1" for the aspect, instead of 1/1. I suggest checking everything twice.

from react-image-crop.

I was having this issue then found that I was passing string "1/1" not the number 1/1 which is 1

from react-image-crop.

Same issue. All Browser appear. Has it been fixed?

from react-image-crop.

from react-image-crop.

Sorry, inspect what? The actual DOM?

The line this error complains about is:

node.setAttribute(attributeName, '' + value);

from react-image-crop.

from react-image-crop.

In that case I'm not really sure what you're asking, but no - there is no immediately obvious DOM node with a crossorigin attribute.

from react-image-crop.

The error:

DOMPropertyOperations.js?17f3:142 Error: <polygon> attribute points: Expected number, "0.2 0, 1 0, 1 NaN, 0.2 NaN".

The config:

<ReactCrop
  crop={{ aspect: 1, width: 100, top: 0, x: 20 }}
  src={photo.preview}
  onComplete={this.setCroppingData}
  onImageLoaded={(crop, image, pixelCrop) => this.setCroppingData(crop, pixelCrop)}
/>

Generally speaking, this error looks like it's being thrown from React source code. Interestingly, as OP stated, it doesn't affect actual functionality whatsoever, at least as far as I can tell.

from react-image-crop.

Hm I can't replicate using that crop prop. In getPolygonValues(forSvg) { function put console.log(crop.x, crop.y, crop.height), I have a feeling your crop.height could be not a number

from react-image-crop.

Yes, that's it exactly. Seems that function is called a few times, one of which crop.height was NaN. What can I do to prevent this?

from react-image-crop.

I am guessing that at some point something unusual is being pass into the cropper, try in your render method logging out the crop props you are passing in, maybe one of them is not a number, or a number as a string or something. If not I'll have to try and get a reproducible example to debug.

from react-image-crop.

As per my initial post:

<ReactCrop crop={{ aspect: 1, width: 100, top: 0, x: 20 }} src={newProfilePhoto.preview} />

That is what I am passing in. They are all integers. No strings, no NaN, nothing except valid integers.

I am never even sending height, so however it is being assigned NaN is happening within react-image-crop.

from react-image-crop.

from react-image-crop.

Browser: Chrome, Version 56.0.2924.87 (64-bit) [OSX]

react-image-crop: v2.0.2

Image: https://i.imgur.com/diacaXd.png

from react-image-crop.

The only thing I can think is that it's related to the fact that the x value in combination with the aspect value forces a recalculation of the width value (I assume this is happening somewhere in your code).

from react-image-crop.

I can't replicate your issue by using that crop and choosing that image (using react-image-crop/demo/index.html). It's likely something else you're doing but I can't solve it unless you can provide a working example of the error sorry

from react-image-crop.

That is a working example, I assure you. I can reproduce with just that data in a clean environment. At any rate, like I have said it doesn't seem to inhibit functionality so it's not a priority for me.

from react-image-crop.