Image Cropper with jQuery

I was experimenting with jQuery’s UI abilities and looking for inspiration, and I thought to myself I think everyone has at some point, with the average CMS, wanted to use an image they have on their PC in their site. It’s high res as it’s from a digital camera for example and, when it’s sized to the size you need, it just doesn’t crop the way you’d want.

As a potential way of sorting this issue using JavaScript, I thought I’d use jQuery and its UI, to create an image cropper. I used the resizable and draggable functions. I created a preview on the right hand side that self centres and scales and, of course, a button to constrain proportions (perhaps it will be in a Flash movie); and a button that, as this is just a JavaScript experiment, alerts the size and position of the image you want to crop. The image size is dynamic, though if bigger than 800 wide the preview will go onto a new line. If I were putting it into practice I think I’d prefer to use Flash, so the cropped image could be uploaded directly rather than the full sized image being uploaded and then resized, as that would need to be the case with this version. It works well, is smooth in most browsers and will no doubt be useful with some development