Select and Crop for header images, crop area is entire image

[TylerTork]

Using latest Firefox on Windows 10, Twenty Sixteen theme and no plugins. Test site ​https://z1.torknado.com displays the result of selecting a header of the wrong aspect ratio and "cropping" it in Customize. I uploaded a photo 2560 by 1920 and am trying to use this as the header image. So from Customize I go to Header Image, Add new image, select my image already in the library, and click Select and crop. The cropping screen opens but there is not a cropping rectangle of the suggested dimensions (1200x280) or of any dimensions. The Crop image button is active, and if I click it, produces a "cropped" copy the same dimensions as the original image.

Oddly, if I repeat the same steps but this time select the "cropped" copy instead of the original (actually "scaled") image, I do get the correct cropping rectangle on the cropped image. It's notable that while the original and so-called cropped version have the same dimensions, the cropped one is a much smaller file size.

Original image: ​https://z1.torknado.com/wp-content/uploads/2021/05/IMG_0373.jpg doesn't appear in the media library screen.
Image as "scaled" by the uploader: ​https://z1.torknado.com/wp-content/uploads/2021/05/IMG_0373-scaled.jpg
"Cropped" image: ​https://z1.torknado.com/wp-content/uploads/2021/05/cropped-IMG_0373-scaled-2.jpg

I observed a similar problem with a different theme (Graphene). In that case the image was scaled to their required dimensions, so it was distorted to show the whole picture. Oddly, this occurred with the cropping step, not just with display. The thumbnail in the media library was wrong, not just the display on the page.

[swissspidy]

Wow, that img selection library core uses is super old (9 years without updates).

It's a known bug there: ​https://github.com/odyniec/imgareaselect/issues/71#issuecomment-404979992

Since WP is already using a patched version, that fix could be added there as well.

[spacedmonkey]

For context, I believe we have found this same issue while working on our plugin ​Web stories. Here is the original ​issue.

This change as documented in the ticket seems reasonable to me

   imgWidth = Math.ceil($img.innerWidth());
   imgHeight = Math.ceil($img.innerHeight());

Ensure that image selector use widths and heights use whole numbers.

Trac ticket: https://core.trac.wordpress.org/ticket/53300

[spacedmonkey]

Added a patch at ​#1528.

The patch is simple, ensure that whole numbers are used for width/height and inner width/height.