Make WordPress Core

Changeset 55859


Ignore:
Timestamp:
05/25/2023 03:15:45 PM (19 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/lib/image-edit.js

    r55843 r55859  
    227227    scaleChanged : function( postid, x, el ) {
    228228        var w = $('#imgedit-scale-width-' + postid), h = $('#imgedit-scale-height-' + postid),
    229         warn = $('#imgedit-scale-warn-' + postid), w1 = '', h1 = '';
     229        warn = $('#imgedit-scale-warn-' + postid), w1 = '', h1 = '',
     230        scaleBtn = $('#imgedit-scale-button');
    230231
    231232        if ( false === this.validateNumeric( el ) ) {
     
    243244        if ( ( h1 && h1 > this.hold.oh ) || ( w1 && w1 > this.hold.ow ) ) {
    244245            warn.css('visibility', 'visible');
     246            scaleBtn.prop('disabled', true);
    245247        } else {
    246248            warn.css('visibility', 'hidden');
     249            scaleBtn.prop('disabled', false);
    247250        }
    248251    },
  • trunk/src/wp-admin/css/media.css

    r55091 r55859  
    11551155
    11561156span.imgedit-scale-warn {
    1157     color: #d63638;
    1158     font-size: 20px;
     1157    display: flex;
     1158    align-items: center;
     1159    margin: 4px;
     1160    gap: 4px;
     1161    color: #b32d2e;
    11591162    font-style: normal;
    11601163    visibility: hidden;
  • trunk/src/wp-admin/includes/image-edit.php

    r55276 r55859  
    144144            ?>
    145145        </label>
    146         <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; ?>" />
     146        <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; ?>" />
    147147        <span class="imgedit-separator" aria-hidden="true">&times;</span>
    148148        <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text">
     
    152152            ?>
    153153        </label>
    154         <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; ?>" />
    155         <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
     154        <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; ?>" />
    156155        <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>
    157156        </div>
     157        <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>
     158
    158159        </fieldset>
    159160
     
    894895    $scale   = ! empty( $_REQUEST['do'] ) && 'scale' === $_REQUEST['do'];
    895896
    896     if ( $scale && $fwidth > 0 && $fheight > 0 ) {
     897    if ( $scale ) {
    897898        $size = $img->get_size();
    898899        $sX   = $size['width'];
    899900        $sY   = $size['height'];
    900901
    901         // Check if it has roughly the same w / h ratio.
    902         $diff = round( $sX / $sY, 2 ) - round( $fwidth / $fheight, 2 );
    903         if ( -0.1 < $diff && $diff < 0.1 ) {
    904             // Scale the full size image.
    905             if ( $img->resize( $fwidth, $fheight ) ) {
    906                 $scaled = true;
    907             }
    908         }
    909 
    910         if ( ! $scaled ) {
    911             $return->error = esc_js( __( 'Error while saving the scaled image. Please reload the page and try again.' ) );
     902        if ( $sX < $fwidth || $sY < $fheight ) {
     903            $return->error = esc_js( __( 'Images cannot be scaled to a size larger than the original.' ) );
    912904            return $return;
     905        }
     906
     907        if ( $fwidth > 0 && $fheight > 0 ) {
     908            // Check if it has roughly the same w / h ratio.
     909            $diff = round( $sX / $sY, 2 ) - round( $fwidth / $fheight, 2 );
     910            if ( -0.1 < $diff && $diff < 0.1 ) {
     911                // Scale the full size image.
     912                if ( $img->resize( $fwidth, $fheight ) ) {
     913                    $scaled = true;
     914                }
     915            }
     916
     917            if ( ! $scaled ) {
     918                $return->error = esc_js( __( 'Error while saving the scaled image. Please reload the page and try again.' ) );
     919                return $return;
     920            }
    913921        }
    914922    } elseif ( ! empty( $_REQUEST['history'] ) ) {
  • trunk/tests/phpunit/tests/ajax/wpAjaxImageEditor.php

    r54722 r55859  
    6363
    6464    /**
     65     * @ticket 26381
     66     * @requires function imagejpeg
     67     *
     68     * @covers ::wp_save_image
     69     */
     70    public function testCropImageIntoLargerOne() {
     71        require_once ABSPATH . 'wp-admin/includes/image-edit.php';
     72
     73        $filename = DIR_TESTDATA . '/images/canola.jpg';
     74        $contents = file_get_contents( $filename );
     75
     76        $upload = wp_upload_bits( wp_basename( $filename ), null, $contents );
     77        $id     = $this->_make_attachment( $upload );
     78
     79        $_REQUEST['action']  = 'image-editor';
     80        $_REQUEST['postid']  = $id;
     81        $_REQUEST['do']      = 'scale';
     82        $_REQUEST['fwidth']  = 700;
     83        $_REQUEST['fheight'] = 500;
     84
     85        $ret = wp_save_image( $id );
     86
     87        $this->assertObjectHasAttribute( 'error', $ret );
     88        $this->assertEquals( 'Images cannot be scaled to a size larger than the original.', $ret->error );
     89    }
     90
     91    /**
    6592     * @ticket 32171
    6693     * @requires function imagejpeg
Note: See TracChangeset for help on using the changeset viewer.