jquery image cropping ideas and implementation_jquery

Idea: JS, jquery cannot realize image cropping, it just shows an illusion

My implementation method is roughly as follows:
1. Upload the image selected by the user to the server
2. Select the image The coordinates of the rectangular frame of the avatar on the picture are sent to the server, including the width and height of the rectangular frame, the x, y coordinates of the upper left corner, the height and width of the picture, etc.
3. Use the obtained coordinate values ​​on the server , and the original image, cropped using JAVA.
----------------------------------
jquery cropping effect display, using imgAreaSelect
http://odyniec.net/projects/imgareaselect/
http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html
The effect is as follows:

JAVA realizes cropping images
http://blog.csdn.net/renfyjava/article/details/9942743
My example:
I display 4 sizes of avatars at the same time, partially The code is as follows:

Copy code The code is as follows:

Display effect: