Wetten, dass..? vom 5. November
This is a little experiment using CSS/JS/DOM for an image cropping GUI. The code is all mine, feel free to use it any way you want. Features:
- The outside area to be cropped away is greened out.
- The inside area can be resized by dragging its edges/corners and moved by dragging its center.
- The mouse cursor icon shows the action.
- Works alright in all browsers I tested (Opera 10.51, Firefox 3.6.3, Chrome 4.1.249, IE 8.0.6001).
I like mine better than the "simple" way of showing a thin line around the inside area with eight tiny handles (see example).
- When the outside is significantly shaded/monochromed and thus visually weak and easy to ignore, you get a better sense of what the result after cropping will look like. I tested several colors and liked green best.
- You know exactly what gets cropped, don't have to wonder whether the border line is inclusive or exclusive.
- The thin line can be hard to see, particularly where the picture has a similar color (try to see the line on the water in the example). Shading the entire outside is clearer.
- The usual eight handles are tiny, you have to move your mouse precisely over them.
And why is there only one handle in the very middle of each edge, why can't I resize by dragging anywhere on an edge?
I made mine so that the handles are fairly thick and all along the whole border.
- It looks cool :-). I particularly enjoy shrinking the area to person size and then moving it around quickly. Thinking of turning this into a little game somehow...
In the below image, adjust the crop area, preferably choose something small, like one person.
Then click here to display that area in higher resolution.
