PDA

View Full Version : Photo Cropper + Ajax + WebService



hazlema
8 Sep 2007, 1:25 PM
Well this is the first thing I'm attempting with Ext and its turning out nicely. I am used to using prototype.js so this app is a mix between the two.

http://beta.devclarity.com/crop/test.html

Its not done yet but I think its pretty solid (now to write the backend).
If you find any browser issues please let me know or any suggestions in general.

JeffHowden
8 Sep 2007, 3:28 PM
What you've got so far is very, very nice. A couple of suggestions as you bring this to completion.

I'd suggest making your "Crop Location" JSON a bit more descriptive.


{
crop: {
top: 43, left: 100, width: 570, height: 375
}
, image: {
width: 720, height: 480
}
}

The crop area should react to the arrow keys for moving it as that will provide much more granular control of the placement than even the steadiest handed user could accomplish with the mouse. Along with that, modifiers should cause the arrow keys to behave slightly differently. When using SHIFT, the movement should be per 10 pixels instead of per 1. When using CTRL, the movement should be to the immediate bounding edge of the photo in the direction of the arrow key (press left, the crop rectangle moves all the way to the left edge of the photo).

Using the modifier keys SHIFT or CTRL when resizing the crop area should change the behavior slightly. The SHIFT key should maintain whatever the current aspect ratio is (like the maintain aspect ratio/freehand toggle buttons you have above the photo). The CTRL key should cause the edge or corner opposite the edge or corner being resized to be resized an equal amount (causing the crop to effectively grow from the middle). I see you currently have it set to resize in increments of 5 which should probably be configurable.

When using the custom size dialog, the crop should resize from the center, not the top left.

The controls above the photo ought to probably be reconfigured into a toolbar with the following menus and buttons.


Size (menu of sizes including a "Custom" option that launches the dialog)
Position (with a flyout with a 9 box grid offering top/left, top/center, top/right, middle/left, middle/center, middle/right, bottom/left, bottom/center, and bottom/right)
Color (with colorpicker menu widget)
Lock toggle button (lock and unlock combined)
Maintain Aspect Ratio toggle button (maintain aspect ratio and freehand combined)


Then, the crop area needs a context menu, presumably with the following:


Lock (checkbox item)
Maintain Aspect Ratio (checkbox item)
Position (with a flyout with a 9 box grid like on the toolbar)
Color (colorpicker menu widget)
Size (menu of sizes, like on toolbar)


It makes sense to have a control like this available as a UX form control so it should probably expose a getValue() method.

hazlema
8 Sep 2007, 3:54 PM
Thank you for the feedback.

I hadn't thought of adding keyboard modifier and arrow support, great idea!

Eventually, all the controls will look pretty and be inside a toolbar like you described I just haven't gotten to that part yet :D

-Matthew

aconran
17 Sep 2007, 1:05 PM
Looks very nice, looking forward to being able to download this as a ux.

Aaron

JeffHowden
17 Sep 2007, 2:18 PM
The "Preset Sizes" combo box probably needs to reset itself whenever you enter a custom size from the dialog you're presented with from clicking "Crop Menu" > "Set Marquee Size". Otherwise it's somewhat disjointed in that the preset size choice no longer reflects the size of the marquee.

Rowan
29 Sep 2007, 6:56 AM
I've just made something very similar to this but yours is executed in a much nicer way than mine, love the fixed crop sizes and animations, I might try to add some of that into my one!

One thing that I had to get mine to do was to be able to resize the main image too, it's just a simple resizable obj with the DD turned off, its pretty simple but works really effectively!

I wish I could post a demo but its locked into a huge app at the moment, I'll do a screen cast of the app once it's finished and up to production standards.

Mine is reusable as it's part of CMS so there is only one image cropper ever called and then the image and ratio is set when it is invoked.

hazlema
29 Sep 2007, 10:37 AM
I've just made something very similar to this but yours is executed in a much nicer way than mine, love the fixed crop sizes and animations, I might try to add some of that into my one!

One thing that I had to get mine to do was to be able to resize the main image too, it's just a simple resizable obj with the DD turned off, its pretty simple but works really effectively!

I wish I could post a demo but its locked into a huge app at the moment, I'll do a screen cast of the app once it's finished and up to production standards.

Mine is reusable as it's part of CMS so there is only one image cropper ever called and then the image and ratio is set when it is invoked.

I haven't worked on this in awhile too busy playing with the new Visual Studio 2008 and those cool ass lambda expressions!

Did you go to the "Apply Crop", there you can specify the size of the cropped region. Lets say your image was 1024x768 and you wanted to create a 120x120 image of your face for a forum icon. Well no matter what size you selected (say 360x360) in the image you can specify you want it to be output as 120x120.

Not quite the same as what you were talking about but I believe it would accomplish the same thing.

galdaka
29 Sep 2007, 11:58 AM
not work in IE6.

Rowan
1 Oct 2007, 12:50 AM
I did look at that but didn't realise that was the reason in there for it, very good demo though, got a lot more too it than mine has!