After javascript-js achieves Image cropping, how can I upload the cropping part to the server ??

How can I upload the cropped image to the server after js achieves Image cropping ?? Because the cropping implemented by js is only an effect, it does not make any changes to the source file and cannot save the selected part to the local disk, then how can I upload the cropped image to the server ?? How can I upload the cropped image to the server after I want to achieve Image cropping ??
Because the cropping implemented by js is only an effect, it does not make any changes to the source file and cannot save the selected part to the local disk, then how can I upload the cropped image to the server ??

My idea is:

1. Upload source files

2. Upload the related information of the cropped image, including the related coordinates and the size of the cropped image.

3. You can use the gd function library in php to crop and save the uploaded original images and related information.

I don't know how to implement Avatar settings on the Internet, for example on various forums ??

Reply content:

How can I upload the cropped image to the server after js achieves Image cropping ??
Because the cropping implemented by js is only an effect, it does not make any changes to the source file and cannot save the selected part to the local disk, then how can I upload the cropped image to the server ??

My idea is:

1. Upload source files

2. Upload the related information of the cropped image, including the related coordinates and the size of the cropped image.

3. You can use the gd function library in php to crop and save the uploaded original images and related information.

I don't know how to implement Avatar settings on the Internet, for example on various forums ??

Recently I wrote an image cropping task. In fact, most of the cropping tasks are in this process:
Upload-> Preview-> confirm the cropping parameters (x, y, w, h, maxW, and maxH)-> submit to the server, and generate a new image address after php processing on the server.

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

Currently, the cropping is performed by the server.
What the front-end can do is to record the coordinates (x, y) and width (w, h) in the upper left corner of the cropping, and then crop and save the four parameters on the server.

Compatibility not considered
1. use canvas to obtain the cut image data
2. Upload image data to the server

On github: https://github.com/baijunjie/jQuery-photoClip