Extra white space in cropped image

[gmerton]

Describe the bug

Hello,
I'm having an issue where the cropped image includes extra white space to the right and bottom of the content. The attached screenshot shows this concretely by highlighting the area of the cropped img tag

Any thoughts on if this is indeed a bug, or user error on my part?

Many thanks for this add-on!

Expected behavior

My expectation is that any image would behave like the empty-plant example, where the the img is "tight" and contains no white space adjacent to the cropped selection.

Minimal reproducible example

I reproduced this example by cloning this repo, uploading my own png to the images directory, and modifying the source image in the BasicImageCropDemo class as shown below. No other changes were made to the original code. I am attaching my test png here.

//Image image = new Image("images/empty-plant.png", "image to crop");
   Image image = new Image("images/91930336-24e7-4d6f-99dd-d504fbf2caad.png", "image to crop");

That image is here:

Add-on Version

1.1.1-SNAPSHOT

Vaadin Version

24.4.6

Additional information

Using Chrome on a MacOS. Lmk if any other info would help!

[gmerton]

Been researching this more.... haven't nailed it down yet but there's some suspicious looking math in the calculation of the canvas dimensions.

[paodb]

Was able to reproduce the problem in our demo by resizing the the demo view with the help of the split layout dividing the screen. We'll investigate the issue.

[gmerton]

Thanks @paodb ,

I was able to get it to work with my use case with the code below. The key changes:

• Changed the last two arguments of drawImage
• Added ctx.scale(1.0 / pixelRatio, 1.0 / pixelRatio);

Notes:

• So far this is working for rectangular areas on the devices I've tested.
• Left out the circular crop code because I don't need it.
• I'm not a SME on this stuff; certainly more testing would be good.

if (image) {
					const ccrop = completedCrop;
					const scaleX = image.naturalWidth / image.width;
					const scaleY = image.naturalHeight / image.height;
					const ctx = canvas.getContext("2d");
					const pixelRatio = window.devicePixelRatio;
					  const sx = ccrop.x * scaleX;
                      const sy = ccrop.y * scaleY;
                      const sWidth = ccrop.width * scaleX;
                      const sHeight = ccrop.height * scaleY;
					canvas.width = ccrop.width * /*pixelRatio **/ scaleX;
					canvas.height = ccrop.height * /*pixelRatio **/ scaleY;
					// Debugging logs for dimensions and scaling
					console.log('natural dimensions', image.naturalWidth, image.naturalHeight);
					console.log('image dimensions', image.width, image.height);
					console.log('canvas dimensions', canvas.width, canvas.height);
					console.log('Scale X', scaleX, 'Scale Y', scaleY);
					console.log('Pixel Ratio', pixelRatio);
					console.log('Crop dimensions', ccrop.width, ccrop.height);
					if (ctx) {
						ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
						ctx.scale(1.0 / pixelRatio, 1.0 / pixelRatio);
						ctx.imageSmoothingQuality = "high";
						ctx.save();
                      	ctx.drawImage(
							image,
							sx,
							sy,
							sWidth,
							sHeight,
							0,
							0,
							canvas.width,
							canvas.height
						);
						ctx.restore();
					}`