Cropper not responsive if only window height is changed

[bene-starzengruber]

Describe the bug
Even with responsive and restore options set to true, the cropper will not update itself if only the height of the window is changed.

Expected behavior
The cropper should react both on width and height

Code

cropperjs/src/js/handlers.js

Line 34 in daf4fb6

const ratio = container.offsetWidth / containerData.width;

The ratio will always be 1 if the user is changing only the height of the window.
In order to fix this, we would need to calculate both ratios for width and height and take the smaller one

[fengyuanchen]

See the next line (Line 37):

cropperjs/src/js/handlers.js

Lines 34 to 37 in daf4fb6

	const ratio = container.offsetWidth / containerData.width;
	// Resize when width changed or height changed
	if (ratio !== 1 || container.offsetHeight !== containerData.height) {

[fengyuanchen]

Also, you can call the internal resize method manully if it is necessary.

[bene-starzengruber]

Hello, thanks for the response

It is true that it enters the code-path but as the ratio is based on the width - it is always 1 and therefore updating the canvas and cropbox data has no effect.

cropperjs/src/js/handlers.js

Lines 49 to 54 in daf4fb6

	this.setCanvasData(forEach(canvasData, (n, i) => {
	canvasData[i] = n * ratio;
	}));
	this.setCropBoxData(forEach(cropBoxData, (n, i) => {
	cropBoxData[i] = n * ratio;
	}));

I have tried it out with this code-snippet and with that it also keeps the crop-box aligned on vertical window changes

var ratioX = container.offsetWidth / containerData.width;
var ratioY = container.offsetHeight / containerData.height;
var ratio = Math.abs(1 - ratioX) > Math.abs(1 - ratioY) ? ratioX : ratioY;

if (ratio !== 1) {
 ...
}

I have created this small repo for reproduction: https://github.com/bene-starzengruber/cropper-js-resize-demo
(hosted preview: https://flamboyant-haibt-04d420.netlify.app/)

1. clone
2. run yarn
3. run yarn dev

If the window width is changed, everything works as expected, if only the height is changed, the cropbox will loose its alignment.
If you change the file in node_modules/.vite/cropperjs.js with the changes mentioned above it seems to work in both directions.

[fengyuanchen]

Good solution.

[bene-starzengruber]

@fengyuanchen do you have a plan when the next release will be so that this fix can land?

[fengyuanchen]

@bene-starzengruber A new version (v1.5.12) has been released.