Rounding issue in renderCropBoxData causing it to set to the old left value

[JamieAtherton]

Describe the bug
When cropping a specific image (https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg) using
setData({
width: 2362,
height: 2362,
x: 0,
y: 0
});
The x value is not set to 0 and instead it reverts it back to the original x value before the call to setData().
We have looked at the source code and traced the issue to the function renderCropBoxData, which doesn't seem to round the width value when checking it against the maxWidth value. i.e width is something like 260.00000000006 (after being scaled down based on the aspect ratio) and maxWidth is 260 and so this check evaluates to false and then it revers the x value. See screenshot below.

To Reproduce
See above

Expected behavior
I expect the x value to be honoured and not reset.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge and chrome
• Version: Latest

Smartphone (please complete the following information):
N/A

Additional context
N/A

[fengyuanchen]

Maybe you have to use cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData) instead of cropper.setData(data).

To restore a crop box exactly, you can reference this example.

[JamieAtherton]

Maybe you have to use cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData) instead of cropper.setData(data).

To restore a crop box exactly, you can reference this example.

The link provided gives me a 404.

Why can't we just round the width and height when scaling the crop box? Pretty sure that would fix the issue

We are allowing users to switch between images by calling cropper.replace(imageUrl), so to restore the crop box for that image we need to call setData() with the last known crop bounds. Otherwise, if we have to call setCropBoxData then we are basically going to have to do all the same scaling calculations that cropperjs does.

[clay-lenhart-jelly]

From a user's point of view, cropperjs seems buggy. We set the crop that the user specified previously and cropperjs ignores it.

How can we fix cropperjs? Should we submit a PR?

[fengyuanchen]

You might try the v2 version.

[clay-lenhart-jelly]

You might try the v2 version.

Ah ok, makes sense what is going on. We were puzzled why you didn't see this as a bug.

[fengyuanchen]

@clay-lenhart-jelly It is a design problem of v1, but not bug. To "fix" this design problem, I refactor all things in v2.

[13twelve]

@JamieAtherton @fengyuanchen it seems if you check the x position after setting and reset just the x position on its own, this works:

let crop = {
  width: 2362,
  height: 2362,
  x: 0,
  y: 0
};

cropper.setData(crop)

if (crop.x !== cropper.getData(true).x) {
  cropper.setData({ x: crop.x })
}

Or, even just setting all the props individually:

let crop = {
  width: 2362,
  height: 2362,
  x: 0,
  y: 0
};

cropper.setData({ x: crop.x })
cropper.setData({ y: crop.y })
cropper.setData({ width: crop.width })
cropper.setData({ height: crop.height })

[JamieAtherton]

@JamieAtherton @fengyuanchen it seems if you check the x position after setting and reset just the x position on its own, this works:

let crop = {
  width: 2362,
  height: 2362,
  x: 0,
  y: 0
};

cropper.setData(crop)

if (crop.x !== cropper.getData(true).x) {
  cropper.setData({ x: crop.x })
}

Or, even just setting all the props individually:

let crop = {
  width: 2362,
  height: 2362,
  x: 0,
  y: 0
};

cropper.setData({ x: crop.x })
cropper.setData({ y: crop.y })
cropper.setData({ width: crop.width })
cropper.setData({ height: crop.height })

Thanks, I ended up just npm patching the node module as a short term solution with this fix: