CB

The cropping also applies too slowly if the user uploads a large image and clicks submit before the browser has processed it. Implement backup cropping in PHP when using user cropping.

Add a spinner icon next to the input to signify it's processing or something of the sort.

The jQuery validate update caused the validation not to trigger until after the field loses focus. This is where the odd delay comes from.

Edit: Validate on change is still present, but since the input is hidden it's ignored. We need to have a special case for this usage though.

The initial cropping is not working. Basically when the image is first output the cropping is applied when the draggable box is established, but when that happens it's outputting an empty canvas resulting in broken initial crop.

Edit: It's due to trying to find the center to initially crop at center as planned. One of the variables calculation fails and returns NaN which breaks the width/height adjustment of the canvas.

Regarding the issue with submit before cropping done: Instead of doing it server-side, why not just delay the submit until cropping is done browser-side ?

There is nothing to delay. It's instant. It just wasn't being triggered.