[wp-trac] [WordPress Trac] #54308: Customizer: Can't crop header images

[WordPress Trac]

#54308: Customizer: Can't crop header images
----------------------------+-----------------------------
 Reporter:  alshakero       |      Owner:  alshakero
     Type:  defect (bug)    |     Status:  assigned
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Customize       |    Version:  trunk
 Severity:  normal          |   Keywords:  needs-patch
  Focuses:  ui, javascript  |
----------------------------+-----------------------------
 Quoting https://github.com/Automattic/wp-calypso/issues/52182

 == Steps to reproduce the behavior ==

 * Activate a theme that uses a custom header image:
 * Go to My Site > Appearance > Customize > Header Image
 * Click on Add new Image
 * Select and image and then click on Select and crop

 === What I expected to happen ===
 To be able to crop the image to the correct header size and then save it
 to the header

 === What actually happened ===
 When you get to the next screen, there is no cropping selection. Dragging
 across the image to create a selected section results in Drop image.
 Clicking on Crop results in the error {file name} There has been an error
 cropping your image. if there is a Skip Cropping option and you select it,
 it does not update the header image

 There is a video of my test site here: d.pr/v/0kpjbn

 == Here is the diagnosis and proposed fix ==

 === imageAreaSelect breaks for non-integer image width ===

 WordPress relies on `imageAreaSelect` in Customizer.

 `imageAreaSelect` has a function called `adjust`, this functions is called
 on every change to the selection box. And it's also called on-load to
 select the entire image.

 `adjust` [https://github.com/alshakero/wordpress-
 develop/blob/25926f1be56cd6f8ca0d47a175c36f1acbc149a0/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js#L327
 has a check] to see whether selection is outside the image boundaries, in
 which case it caps the selection values to image boundaries and re-
 renders.

 This capping is done by using `Math.min` and `Math.max`, which return
 `NaN` if one of their operands is undefined.

 When an image is loaded, we render the selection box, then we call
 `adjust`. If the image has a width of `400.6`, its width is rounded to
 `401` and the selection box's width is set to that, when we check if the
 selection went outside the image `if(selection.x2 > imgWidth)` we get
 `true`, because the rounded value is indeed bigger than the original
 value. When we come to re-render by calling `doResize`, `Math.min` returns
 `NaN` and the selection box disappears.

 A possible solution is to use `floor` instead of `round`, this way the
 check `if(selection.x2 > imgWidth)` won't return true for non-integer
 image width.

 Another solution might be to check if any of the coordinates are
 `undefined` in the beginning of `doResize`. I tried both solutions and
 both work, but I prefer the first one, because the second one might hide
 bugs we don't know about and make it harder to debug them.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/54308>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform