Changeset 55859

Timestamp:

05/25/2023 03:15:45 PM (17 months ago)

Author:

antpb

Message:

Media: Prevent scaling up of images in the Image Editor.

Previously, when scaling an image larger than the source size in the image edit states the image would silently fail the scaling action. This patch provides an error when someone attempts to scale an image larger than the source size while also disabling the button to initiate the action.

Props brookedot, joedolson, markoheijnen, mikeschroder, desrosj, Mista-Flo, costdev.
Fixes #26381.

Location:

trunk

Files:

• src/js/_enqueues/lib/image-edit.js (modified) (2 diffs)
• src/wp-admin/css/media.css (modified) (1 diff)
• src/wp-admin/includes/image-edit.php (modified) (3 diffs)
• tests/phpunit/tests/ajax/wpAjaxImageEditor.php (modified) (1 diff)

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

@@ -227 +227 @@
     scaleChanged : function( postid, x, el ) {
         var w = $('#imgedit-scale-width-' + postid), h = $('#imgedit-scale-height-' + postid),
-        warn = $('#imgedit-scale-warn-' + postid), w1 = '', h1 = '';
+        warn = $('#imgedit-scale-warn-' + postid), w1 = '', h1 = '',
+        scaleBtn = $('#imgedit-scale-button');
 
         if ( false === this.validateNumeric( el ) ) {
@@ -243 +244 @@
         if ( ( h1 && h1 > this.hold.oh ) || ( w1 && w1 > this.hold.ow ) ) {
             warn.css('visibility', 'visible');
+            scaleBtn.prop('disabled', true);
         } else {
             warn.css('visibility', 'hidden');
+            scaleBtn.prop('disabled', false);
         }
     },

trunk/src/wp-admin/css/media.css

@@ -1155 +1155 @@
 
 span.imgedit-scale-warn {
-    color: #d63638;
-    font-size: 20px;
+    display: flex;
+    align-items: center;
+    margin: 4px;
+    gap: 4px;
+    color: #b32d2e;
     font-style: normal;
     visibility: hidden;

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

@@ -144 +144 @@
             ?>
         </label>
-        <input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
+        <input type="number" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" min="1" max="<?php echo isset( $meta['width'] ) ? $meta['width'] : ''; ?>" step="1" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onchange="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
         <span class="imgedit-separator" aria-hidden="true">&times;</span>
         <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text">
@@ -152 +152 @@
             ?>
         </label>
-        <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
-        <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
+        <input type="number" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" min="1" max="<?php echo isset( $meta['height'] ) ? $meta['height'] : ''; ?>" step="1" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onchange="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
         <div class="imgedit-scale-button-wrapper"><input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" /></div>
         </div>
+        <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>"><span class="dashicons dashicons-warning" aria-hidden="true"></span><?php esc_html_e( 'Images cannot be scaled to a size larger than the original.' ); ?></span>
+
         </fieldset>
 
@@ -894 +895 @@
     $scale   = ! empty( $_REQUEST['do'] ) && 'scale' === $_REQUEST['do'];
 
-    if ( $scale && $fwidth > 0 && $fheight > 0 ) {
+    if ( $scale ) {
         $size = $img->get_size();
         $sX   = $size['width'];
         $sY   = $size['height'];
 
-        // Check if it has roughly the same w / h ratio.
-        $diff = round( $sX / $sY, 2 ) - round( $fwidth / $fheight, 2 );
-        if ( -0.1 < $diff && $diff < 0.1 ) {
-            // Scale the full size image.
-            if ( $img->resize( $fwidth, $fheight ) ) {
-                $scaled = true;
-            }
-        }
-
-        if ( ! $scaled ) {
-            $return->error = esc_js( __( 'Error while saving the scaled image. Please reload the page and try again.' ) );
+        if ( $sX < $fwidth || $sY < $fheight ) {
+            $return->error = esc_js( __( 'Images cannot be scaled to a size larger than the original.' ) );
             return $return;
+        }
+
+        if ( $fwidth > 0 && $fheight > 0 ) {
+            // Check if it has roughly the same w / h ratio.
+            $diff = round( $sX / $sY, 2 ) - round( $fwidth / $fheight, 2 );
+            if ( -0.1 < $diff && $diff < 0.1 ) {
+                // Scale the full size image.
+                if ( $img->resize( $fwidth, $fheight ) ) {
+                    $scaled = true;
+                }
+            }
+
+            if ( ! $scaled ) {
+                $return->error = esc_js( __( 'Error while saving the scaled image. Please reload the page and try again.' ) );
+                return $return;
+            }
         }
     } elseif ( ! empty( $_REQUEST['history'] ) ) {

trunk/tests/phpunit/tests/ajax/wpAjaxImageEditor.php

@@ -63 +63 @@
 
     /**
+     * @ticket 26381
+     * @requires function imagejpeg
+     *
+     * @covers ::wp_save_image
+     */
+    public function testCropImageIntoLargerOne() {
+        require_once ABSPATH . 'wp-admin/includes/image-edit.php';
+
+        $filename = DIR_TESTDATA . '/images/canola.jpg';
+        $contents = file_get_contents( $filename );
+
+        $upload = wp_upload_bits( wp_basename( $filename ), null, $contents );
+        $id     = $this->_make_attachment( $upload );
+
+        $_REQUEST['action']  = 'image-editor';
+        $_REQUEST['postid']  = $id;
+        $_REQUEST['do']      = 'scale';
+        $_REQUEST['fwidth']  = 700;
+        $_REQUEST['fheight'] = 500;
+
+        $ret = wp_save_image( $id );
+
+        $this->assertObjectHasAttribute( 'error', $ret );
+        $this->assertEquals( 'Images cannot be scaled to a size larger than the original.', $ret->error );
+    }
+
+    /**
      * @ticket 32171
      * @requires function imagejpeg