Upgrade cropperjs to v2, add avatar id and link to it #33827
Conversation
GiteaBot
added
the
lgtm/need 2
GiteaBot
added
lgtm/need 1
|
There's also the initial area selection not working for some reason. It previously selects 50% of the area space, I think I would like to make that 100%. |
github-actions
bot
added
the
modifies/templates
|
Still not fully working, but I pushed one related improvement: Clicking on the current user's avatar now adds the |
|
All working now. The only noticeable difference to before is that the checkered background is removed now, because I find it doesn't look good on dark theme. Here is how it looks without and with selection: 
|
silverwind
changed the title
GiteaBot
added
lgtm/done
|
The selection area could be dragged out of the image, then the generated image will have a lot of space. (It is impossible in v1 version)
|
|
It overflows on mobile view, v1 has a scrollbar .......
|
| </cropper-selection> | ||
| </cropper-canvas> | ||
| `); | ||
| cropperCanvas.querySelector<CropperSelection>('cropper-selection').addEventListener('change', debounce(async (e) => { |
There was a problem hiding this comment.
This event is not right. For example: "zoom" won't trigger "change" event and users will get wrong image.
There was a problem hiding this comment.
Ideally I would like to disable zooming, but found no way to do so.
Yes I wanted to limit the selection space, but the example code was rather complex. Maybe I will try again: https://fengyuanchen.github.io/cropperjs/v2/api/cropper-selection.html#limit-boundaries |
|
Maybe https://github.com/github/image-crop-element is also worth investigation as a replacement for cropperjs. It seems like a lightweight alternative and is what GitHub also uses. The canvas interactions to actually crop the image need to performed in our code with that lib. |
Update cropperjs to v2.
Potential upstream issue: fengyuanchen/cropperjs#1233No longer needed, we now re-create the element every time instead of updating.