WP Image Editor glitches with constrained dimensions

[programmin]

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?

[programmin]

Screenshot example.

[programmin]

So is this WP-Image edit not really meant to be extended in such a way? Maybe MCE's image-editor would be more appropriate?

[programmin]

It seems to be a bug in that jQuery imgAreaSelect plugin: ​https://github.com/odyniec/imgareaselect/issues/86

Looking through the other issues it seems there are other bugs regarding css, and also lacking touch support.

Furthermore it seems the latest update to that particular repo was 3 years ago. While it seems to work okay for Wordpress' use in image-editor, have other image-cropping/selecting plugins been considered for this task in WP core?

[programmin]

Looks like you are using constrained dimension in the site_icon picker in the customizer (wp.customize) - This is almost what I was looking for, and I would hope there would be better documentation on this. Where can we find examples on how to make a simple picker like the site icon with constrained dimensions cropper?

[adamsilverstein]

Replying to programmin:

Looks like you are using constrained dimension in the site_icon picker in the customizer (wp.customize) -

Yes, we use a forced cropping mode in the site icon picker although I don't think its well documented. If you search thru the core code for flex-width and its js counterpart flexWidth you will find code examples that use it.

This seems like a support request, I don't think this is a bug although, aside from the missing documentation.

I would suggest asking your question including exactly what you are trying to do on the support forums: ​https://wordpress.org/support/

[hellofromTonya]

Hello @programmin,

Is this still an issue for you today?

I'm marking this ticket as a close worksforme candidate. Please don't be alarmed. We mark tickets for close consideration when we are unable to reproduce and suspect the problem is not due to WordPress core. However, when more information is given, we reevaluate.

[hellofromTonya]

Closing this ticket as there's been no reporter follow-up and most likely a support request rather than core.

However @programmin if the problem persists for you today after trying the support forums, please reopen and provide follow-up information. The information helps contributors to further investigate.