Changeset 58456

Timestamp:

06/21/2024 07:49:19 PM (3 months ago)

Author:

joedolson

Message:

Media: Fix admin image cropping calculations.

The admin image editor crop function introduced rounding errors by using a scaled image to calculate values. Fix uses the image at 100% scale for calculations. Also avoid recalculating selection when the selection position is changed, and prevent incorrect values after scaling or restoration.

Props Jossnaz, johnillo, shailu25, rachelbaker, sudipatel007, joedolson.
Fixes #32282.

Location:

trunk/src

Files:

• js/_enqueues/lib/image-edit.js (modified) (17 diffs)
• wp-admin/includes/image-edit.php (modified) (1 diff)

trunk/src/js/_enqueues/lib/image-edit.js

@@ -144 +144 @@
      */
     init : function(postid) {
-        var t = this, old = $('#image-editor-' + t.postid),
-            x = t.intval( $('#imgedit-x-' + postid).val() ),
-            y = t.intval( $('#imgedit-y-' + postid).val() );
+        var t = this, old = $('#image-editor-' + t.postid);
 
         if ( t.postid !== postid && old.length ) {
@@ -152 +150 @@
         }
 
-        t.hold.w = t.hold.ow = x;
-        t.hold.h = t.hold.oh = y;
-        t.hold.xy_ratio = x / y;
         t.hold.sizer = parseFloat( $('#imgedit-sizer-' + postid).val() );
         t.postid = postid;
@@ -187 +182 @@
 
         $( document ).on( 'image-editor-ui-ready', this.focusManager );
+    },
+
+    /**
+     * Calculate the image size and save it to memory.
+     *
+     * @since 6.6.0
+     *
+     * @memberof imageEdit
+     *
+     * @param {number} postid The post ID.
+     *
+     * @return {void}
+     */
+    calculateImgSize: function( postid ) {
+        var t = this,
+        x = t.intval( $( '#imgedit-x-' + postid ).val() ),
+        y = t.intval( $( '#imgedit-y-' + postid ).val() );
+
+        t.hold.w = t.hold.ow = x;
+        t.hold.h = t.hold.oh = y;
+        t.hold.xy_ratio = x / y;
+        t.hold.sizer = parseFloat( $( '#imgedit-sizer-' + postid ).val() );
+        t.currentCropSelection = null;
     },
 
@@ -526 +544 @@
                 i = history[n];
                 if ( i.hasOwnProperty('c') ) {
-                    op[n] = { 'c': { 'x': i.c.x, 'y': i.c.y, 'w': i.c.w, 'h': i.c.h } };
+                    op[n] = { 'c': { 'x': i.c.x, 'y': i.c.y, 'w': i.c.w, 'h': i.c.h, 'r': i.c.r } };
                 } else if ( i.hasOwnProperty('r') ) {
                     op[n] = { 'r': i.r.r };
@@ -861 +879 @@
             this.init( postid );
         }
+        this.calculateImgSize( postid );
 
         this.initCrop(postid, img, parent);
@@ -910 +929 @@
             selW = $('#imgedit-sel-width-' + postid),
             selH = $('#imgedit-sel-height-' + postid),
-            selX = $('#imgedit-start-x-' + postid),
-            selY = $('#imgedit-start-y-' + postid),
             $image = $( image ),
             $img;
@@ -946 +963 @@
                  * @return {void}
                  */
-                parent.children().on( 'mousedown, touchstart', function(e){
-                    var ratio = false, sel, defRatio;
-
-                    if ( e.shiftKey ) {
-                        sel = t.iasapi.getSelection();
-                        defRatio = t.getSelRatio(postid);
-                        ratio = ( sel && sel.width && sel.height ) ? sel.width + ':' + sel.height : defRatio;
+                parent.children().on( 'mousedown touchstart', function(e) {
+                    var ratio = false,
+                        sel = t.iasapi.getSelection(),
+                        cx = t.intval( $( '#imgedit-crop-width-' + postid ).val() ),
+                        cy = t.intval( $( '#imgedit-crop-height-' + postid ).val() );
+
+                    if ( cx && cy ) {
+                        ratio = t.getSelRatio( postid );
+                    } else if ( e.shiftKey && sel && sel.width && sel.height ) {
+                        ratio = sel.width + ':' + sel.height;
                     }
 
@@ -1001 +1021 @@
              */
             onSelectChange: function(img, c) {
-                var sizer = imageEdit.hold.sizer;
-                selW.val( imageEdit.round(c.width / sizer) );
-                selH.val( imageEdit.round(c.height / sizer) );
-                selX.val( imageEdit.round(c.x1 / sizer) );
-                selY.val( imageEdit.round(c.y1 / sizer) );
+                var sizer = imageEdit.hold.sizer,
+                    oldSel = imageEdit.currentCropSelection;
+
+                if ( oldSel != null && oldSel.width == c.width && oldSel.height == c.height ) {
+                    return;
+                }
+
+                selW.val( Math.min( imageEdit.hold.w, imageEdit.round( c.width / sizer ) ) );
+                selH.val( Math.min( imageEdit.hold.h, imageEdit.round( c.height / sizer ) ) );
+
+                t.currentCropSelection = c;
             }
         });
@@ -1023 +1049 @@
      */
     setCropSelection : function(postid, c) {
-        var sel;
+        var sel,
+            selW = $( '#imgedit-sel-width-' + postid ),
+            selH = $( '#imgedit-sel-height-' + postid ),
+            sizer = this.hold.sizer,
+            hold = this.hold;
 
         c = c || 0;
@@ -1038 +1068 @@
         }
 
-        sel = { 'x': c.x1, 'y': c.y1, 'w': c.width, 'h': c.height };
+        // adjust the selection within the bounds of the image on 100% scale
+        var excessW = hold.w - ( Math.round( c.x1 / sizer ) + parseInt( selW.val() ) );
+        var excessH = hold.h - ( Math.round( c.y1 / sizer ) + parseInt( selH.val() ) );
+        var x = Math.round( c.x1 / sizer ) + Math.min( 0, excessW );
+        var y = Math.round( c.y1 / sizer ) + Math.min( 0, excessH );
+
+        // use 100% scaling to prevent rounding errors
+        sel = { 'r': 1, 'x': x, 'y': y, 'w': selW.val(), 'h': selH.val() };
+
         this.setDisabled($('.imgedit-crop', '#imgedit-panel-' + postid), 1);
         $('#imgedit-selection-' + postid).val( JSON.stringify(sel) );
@@ -1166 +1204 @@
         this.closePopup(t);
         this.addStep({ 'r': { 'r': angle, 'fw': this.hold.h, 'fh': this.hold.w }}, postid, nonce);
+
+        // Clear the selection fields after rotating.
+        $( '#imgedit-sel-width-' + postid ).val( '' );
+        $( '#imgedit-sel-height-' + postid ).val( '' );
+        this.currentCropSelection = null;
     },
 
@@ -1188 +1231 @@
         this.closePopup(t);
         this.addStep({ 'f': { 'f': axis, 'fw': this.hold.w, 'fh': this.hold.h }}, postid, nonce);
+
+        // Clear the selection fields after flipping.
+        $( '#imgedit-sel-width-' + postid ).val( '' );
+        $( '#imgedit-sel-height-' + postid ).val( '' );
+        this.currentCropSelection = null;
     },
 
@@ -1220 +1268 @@
 
         // Clear the selection fields after cropping.
-        $('#imgedit-sel-width-' + postid).val('');
-        $('#imgedit-sel-height-' + postid).val('');
-        $('#imgedit-start-x-' + postid).val('0');
-        $('#imgedit-start-y-' + postid).val('0');
+        $( '#imgedit-sel-width-' + postid ).val( '' );
+        $( '#imgedit-sel-height-' + postid ).val( '' );
+        $( '#imgedit-start-x-' + postid ).val( '0' );
+        $( '#imgedit-start-y-' + postid ).val( '0' );
+        this.currentCropSelection = null;
     },
 
@@ -1313 +1362 @@
             sizer = this.hold.sizer, x1, y1, x2, y2, ias = this.iasapi;
 
+        this.currentCropSelection = null;
+
         if ( false === this.validateNumeric( el ) ) {
             return;
@@ -1336 +1387 @@
                 x1 = 0;
                 x2 = imgw;
-                elX.val( Math.round( x2 / sizer ) );
+                elX.val( Math.min( this.hold.w, Math.round( x2 / sizer ) ) );
             }
 
@@ -1342 +1393 @@
                 y1 = 0;
                 y2 = imgh;
-                elY.val( Math.round( y2 / sizer ) );
+                elY.val( Math.min( this.hold.h, Math.round( y2 / sizer ) ) );
             }
 
@@ -1348 +1399 @@
             ias.update();
             this.setCropSelection(postid, ias.getSelection());
+            this.currentCropSelection = ias.getSelection();
         }
     },

trunk/src/wp-admin/includes/image-edit.php

@@ -736 +736 @@
                     $h    = $size['height'];
 
-                    $scale = 1 / _image_get_preview_ratio( $w, $h ); // Discard preview scaling.
+                    $scale = isset( $sel->r ) ? $sel->r : 1 / _image_get_preview_ratio( $w, $h ); // Discard preview scaling.
                     $image->crop( $sel->x * $scale, $sel->y * $scale, $sel->w * $scale, $sel->h * $scale );
                 } else {
-                    $scale = 1 / _image_get_preview_ratio( imagesx( $image ), imagesy( $image ) ); // Discard preview scaling.
+                    $scale = isset( $sel->r ) ? $sel->r : 1 / _image_get_preview_ratio( imagesx( $image ), imagesy( $image ) ); // Discard preview scaling.
                     $image = _crop_image_resource( $image, $sel->x * $scale, $sel->y * $scale, $sel->w * $scale, $sel->h * $scale );
                 }