[wp-trac] [WordPress Trac] #35232: WP Image Editor glitches with constrained dimensions

[WordPress Trac]

#35232: WP Image Editor glitches with constrained dimensions
--------------------------+-----------------------------
 Reporter:  programmin    |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Editor        |    Version:  trunk
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 In a certain instance I want to make an image editor instance work for
 making sure the selected image gets cropped/resized to a certain dimension
 if it is not so already. As proof of concept I started with this slightly
 modified function that overrides the almost-identical code in image-
 editor.js, with exception of setting max and min height and width of
 selection, to select a 300x300:


 {{{
 <script>
         window.addEventListener('load', function(){
         //TODO: proof of concept, just copies image-edit.js for now:
         var $ = jQuery;
         window.imageEdit.initCrop = function(postid, image, parent) {
                 var t = this,
                         selW = $('#imgedit-sel-width-' + postid),
                         selH = $('#imgedit-sel-height-' + postid),
                         $img;

                 t.iasapi = $(image).imgAreaSelect({
                         parent: parent,
                         instance: true,
                         handles: true,
                         keys: true,
                         minWidth: 300, maxWidth:300,
                         minHeight: 300, maxWidth:300,

                         onInit: function( img ) {
                                 // Ensure that the imgareaselect wrapper
 elements are position:absolute
                                 // (even if we're in a position:fixed
 modal)
                                 $img = $( img );
                                 $img.next().css( 'position', 'absolute' )
                                         .nextAll( '.imgareaselect-outer'
 ).css( 'position', 'absolute' );

                                 parent.children().mousedown(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;
                                         }

                                         t.iasapi.setOptions({
                                                 aspectRatio: ratio
                                         });
                                 });
                         },

                         onSelectStart: function() {
                                 imageEdit.setDisabled($('#imgedit-crop-
 sel-' + postid), 1);
                         },

                         onSelectEnd: function(img, c) {
                                 imageEdit.setCropSelection(postid, c);
                         },

                         onSelectChange: function(img, c) {
                                 var sizer = imageEdit.hold.sizer;
                                 selW.val( imageEdit.round(c.width / sizer)
 );
                                 selH.val( imageEdit.round(c.height /
 sizer) );
                         }
                 });
         }
         });
         </script>
 }}}

 I set it to print this out on admin_footer_text filter and unfortunately
 it completely breaks the crop tool on http://localhost/wordpress/wp-
 admin/upload.php: (see attached screenshot)


 Furthermore it seems I can move, but not resize the selection, yet the
 dimensions are wrong, and never 300x300! Am I missing something or is it
 not possible to do any such restriction like this with the WP Image
 Editor?

--
Ticket URL: <https://core.trac.wordpress.org/ticket/35232>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform