How can I upload the cropped part to the server after javascript-js the effect of the picture cropping??

JS to achieve the effect of cutting the picture, how to cut the picture to upload to the server??
Since the JS implementation of the crop is only an effect, and did not make any changes to the source file, and can not save the selected parts to the local disk, how can the user cut the picture to upload to the server??

My idea is:

1. Uploading source files

2. Upload relevant information about the cropped image, including the relevant coordinates, the size of the picture after cutting

3. Through the PHP's GD function library to upload the original image and related information to the actual cutting, save

Do not know on the network, such as the various forums, such as avatar settings, how to achieve??

Reply content:

JS to achieve the effect of cutting the picture, how to cut the picture to upload to the server??
Since the JS implementation of the crop is only an effect, and did not make any changes to the source file, and can not save the selected parts to the local disk, how can the user cut the picture to upload to the server??

My idea is:

1. Uploading source files

2. Upload relevant information about the cropped image, including the relevant coordinates, the size of the picture after cutting

3. Through the PHP's GD function library to upload the original image and related information to the actual cutting, save

Do not know on the network, such as the various forums, such as avatar settings, how to achieve??

Recently I wrote a picture cutting, in fact, most of the crop is this process:
Upload, preview, and OK cropping parameters (X,Y,W,H,MAXW,MAXH), submit to the service side, the service side PHP processing to generate a new image address

Plug-in address, more lightweight https://github.com/Vanthink-UED/jquery.core.image.upload

At present, the cutting is done on the service side.
What the front end can do is record the upper-left coordinate (x, y) and width (w,h) to be trimmed, and then crop and save the 4 parameters on the server.

Do not consider compatibility
1, through the canvas to obtain the picture data after cut
2. Upload the image data to the server

On Github:https://github.com/baijunjie/jquery-photoclip

