javascript - After realizing the image cropping effect with js, how to upload the cropped part to the server? ?

After realizing the effect of image cropping with js, how to upload the cropped image to the server? ?
Since the cropping implemented by js is just an effect and does not make any changes to the source file, and the selected part cannot be saved to the local disk, how to upload the user-cropped image to the server? ?

My thoughts are:

1. Upload source file

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

3. Use PHP’s gd function library to actually crop the uploaded original image and related information, and save it

I wonder how the avatar setting on the Internet, such as on various forums, is implemented? ?

Reply content:

After realizing the effect of image cropping with js, how to upload the cropped image to the server? ?
Since the cropping implemented by js is just an effect and does not make any changes to the source file, and the selected part cannot be saved to the local disk, how to upload the user-cropped image to the server? ?

My thoughts are:

1. Upload source file

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

3. Use PHP’s gd function library to actually crop the uploaded original image and related information, and save it

I don’t know how to implement avatar settings on the Internet, such as in various forums? ?

I recently wrote an image cropping myself. In fact, most cropping follows this process:
Upload-> Preview-> Determine cropping parameters (x, y, w, h, maxW, maxH)-> ;Submit to the server, and the server will generate a new image address after PHP processing

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

Currently, cropping is done on the server side.
What the front end can do is record the upper left corner coordinates (x, y) and width and height (w, h) to be cropped, and then crop and save them on the server based on these 4 parameters.

Regardless of compatibility
1. Get the cut image data through canvas
2. Upload the image data to the server

Go to github: https://github.com/baijunjie/jQuery-photoClip