Allow cropping an avatar before setting it

[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.

[wxiaoguang]

Made some changes in 5f893c3 , the code is also simplified:

1. remove the "preview" image, it doesn't really help, the cropper already shows the result clearly, then the mobile display is also resolved.
2. use field tw-pl-4 instead of inline field to make the form field content align
3. most cropper styles are not needed, only need to limit the size
4. make initCompCropper more general, decouple it from user avatar page
5. make initCompCropper type-script error-free
6. remove the unnecessary _cropper property, the JS function already have a good variable scope
7. use viewMode: 2, to replace viewMode: 1 to avoid users zoom too much
8. use correct filename (replace ext) and last modified time