Add cropping support for avatar editing

[kerwin612]

In response to the issues raised in #31990, and related discussions in #31991;
I tend to agree with @silverwind's viewpoint (using object-fit: cover; is equivalent to actively cropping the image for the user, which cannot guarantee the crop is what the user wants).
Therefore, I believe this issue should be addressed in two parts:
①, Add a border to the user's avatar, similar to how GitHub does it; this way, unconventionally proportion images configured through the API won't look as ugly as mentioned in the issue.
②, Provide a cropping tool on the avatar editing page, allowing users to select the cropping area themselves. This way, users can decide the displayed area of the image, rather than us deciding for them.

This PR is the solution for part ②; I will propose the solution for part ① in another PR.

[wxiaoguang]

1. Do not use single word for names (see the frontend guideline)
2. Do not pollute global CSS classes like "hidden"
3. Do users all agree to only use "jpeg" file as avatar? IIRC there were requests to support animated png and webp before. I do not mean which decision is right, but if the behavior is changed, there should be a explanation for this breaking change.

[kerwin612]

1. Do not use single word for names (see the frontend guideline)
2. Do not pollute global CSS classes like "hidden"
3. Do users all agree to only use "jpeg" file as avatar? IIRC there were requests to support animated png and webp before. I do not mean which decision is right, but if the behavior is changed, there should be a explanation for this breaking change.

Thank you for the suggestion. The code has been changed according to the specifications. Additionally, I have added the necessary prompt to inform users that cropped images will be saved in JPEG format uniformly.

[silverwind]

1. If we have to decide on a single output format, it should be PNG imho, not JPEG. Lossy formats suck.
2. When the user does not crop, pass through the image unmodified.

Gitea already supports formats like animated PNG and WEBP for avatars, so with the passthrough, they should continue to work.

[kerwin612]

code optimization

Thank you. Both requirements have been implemented.

[silverwind]

Can we put the cropping content into a fomantic modal instead of dumping it into the page body like that?

Edit: Or maybe it's okay, given that this form requires to hit the submit button below anyways.