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.


git-svn-id: https://develop.svn.wordpress.org/trunk@55859 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -226,7 +226,8 @@
 	 */
 	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 ) ) {
 			return;
@@ -242,8 +243,10 @@
 
 		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);
 		}
 	},
 

src/wp-admin/css/media.css

@@ -1154,8 +1154,11 @@ border color while dragging a file over the uploader drop area */
 }
 
 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;
 	vertical-align: middle;

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

@@ -143,7 +143,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 			_e( 'scale width' );
 			?>
 		</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">
 			<?php
@@ -151,10 +151,11 @@ function wp_image_editor( $post_id, $msg = false ) {
 			_e( 'scale height' );
 			?>
 		</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>
 
 		</div>
@@ -893,23 +894,30 @@ function wp_save_image( $post_id ) {
 	$target  = ! empty( $_REQUEST['target'] ) ? preg_replace( '/[^a-z0-9_-]+/i', '', $_REQUEST['target'] ) : '';
 	$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 ( $sX < $fwidth || $sY < $fheight ) {
+			$return->error = esc_js( __( 'Images cannot be scaled to a size larger than the original.' ) );
+			return $return;
 		}
 
-		if ( ! $scaled ) {
-			$return->error = esc_js( __( 'Error while saving the scaled image. Please reload the page and try again.' ) );
-			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'] ) ) {
 		$changes = json_decode( wp_unslash( $_REQUEST['history'] ) );

tests/phpunit/tests/ajax/wpAjaxImageEditor.php

@@ -61,6 +61,33 @@ class Tests_Ajax_wpAjaxImageEditor extends WP_Ajax_UnitTestCase {
 		$this->assertArrayHasKey( 'medium', $media_meta['sizes'], 'cropped attachment should have data for medium size' );
 	}
 
+	/**
+	 * @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