[wp-trac] [WordPress Trac] #62453: Cropping of images in WP 6.7 (and 6.8) is broken

[WordPress Trac]

#62453: Cropping of images in WP 6.7 (and 6.8) is broken
-------------------------------+------------------------------
 Reporter:  axelkratel         |       Owner:  (none)
     Type:  defect (bug)       |      Status:  new
 Priority:  normal             |   Milestone:  Awaiting Review
Component:  Media              |     Version:  6.7.1
 Severity:  normal             |  Resolution:
 Keywords:  reporter-feedback  |     Focuses:
-------------------------------+------------------------------

Comment (by J.Kiyama):

 I also created a temporary MU-plugin workaround for anyone currently
 affected by this issue.

 This workaround synchronizes the crop X/Y coordinate fields with the
 current imgAreaSelect selection after the crop UI becomes active.

 It is not a perfect fix because there still seems to be an initialization
 timing issue immediately after opening the image editor, but it improves
 synchronization once the crop UI is active.

 Place this file in:

 {{{
 wp-content/mu-plugins/fix-wp-image-crop-coordinates.php
 }}}

 {{{#!php
 <?php
 /**
  * Plugin Name: Fix WP Image Crop Coordinates
  *
  * Temporary workaround for WordPress image crop coordinate sync bug.
  * Remove if fixed in future WordPress core versions.
  */

 add_action( 'admin_print_footer_scripts', function() {
         ?>
         <script>
         jQuery(function($){

                 if ( typeof imageEdit === 'undefined' ) {
                         return;
                 }

                 function syncCropCoords() {
                         var img = $( '[id^="image-preview-"]:visible'
 ).first();

                         if ( ! img.length || ! img.imgAreaSelect ) {
                                 return;
                         }

                         var postid = img.attr( 'id' ).replace( 'image-
 preview-', '' );
                         var api = img.imgAreaSelect({ instance: true });

                         if ( ! api || ! api.getSelection ) {
                                 return;
                         }

                         var c = api.getSelection();

                         if ( ! c || ! c.width || ! c.height ) {
                                 return;
                         }

                         var sizer = imageEdit.hold && imageEdit.hold.sizer
 ? imageEdit.hold.sizer : 1;

                         $( '#imgedit-start-x-' + postid ).val(
                                 Math.max( 0, imageEdit.round( c.x1 / sizer
 ) )
                         );

                         $( '#imgedit-start-y-' + postid ).val(
                                 Math.max( 0, imageEdit.round( c.y1 / sizer
 ) )
                         );
                 }

                 $( document ).on(
                         'mousemove mouseup touchmove touchend keyup
 change',
                         '.imgareaselect-selection, .imgareaselect-border1,
 .imgareaselect-border2, .imgareaselect-border3, .imgareaselect-border4,
 .imgareaselect-handle, [id^="image-preview-"]',
                         function() {
                                 setTimeout( syncCropCoords, 0 );
                         }
                 );

                 var originalSetCropSelection = imageEdit.setCropSelection;

                 imageEdit.setCropSelection = function( postid, c ) {
                         var result = originalSetCropSelection.apply( this,
 arguments );

                         setTimeout( syncCropCoords, 0 );

                         return result;
                 };

         });
         </script>
         <?php
 });
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62453#comment:15>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform