sjs/immich
1
0
Fork 0
mirror of https://github.com/samsonjs/immich.git synced 2026-04-27 15:07:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: revert "fix(web): Ensure profile picture is cropped to 1:1 ratio (#25892)" (#25956)

Browse source 
Revert "fix(web): Ensure profile picture is cropped to 1:1 ratio (#25892)"

This reverts commit 3c77c724c5.
This commit is contained in:
Michel Heusschen 2026-02-06 14:21:56 +01:00 committed by GitHub
parent 211dc3c056
commit 16fe828913
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 6 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
web/src/lib/modals/ProfileImageCropperModal.svelte
View file

@ -16,7 +16,6 @@
let { asset, onClose }: Props = $props(); let { asset, onClose }: Props = $props();
let imgElement: HTMLDivElement | undefined = $state(); let imgElement: HTMLDivElement | undefined = $state();
let cropContainer: HTMLDivElement | undefined = $state();
onMount(() => { onMount(() => {
if (!imgElement) { if (!imgElement) {
@ -52,23 +51,16 @@
}; };
const onSubmit = async () => { const onSubmit = async () => {
if (!cropContainer) { if (!imgElement) {
return; return;
} }
try { try {
// Get the container dimensions (which is always square due to aspect-square class) const imgElementHeight = imgElement.offsetHeight;
const containerSize = cropContainer.offsetWidth; const imgElementWidth = imgElement.offsetWidth;
const blob = await domtoimage.toBlob(imgElement, {
// Capture the crop container which maintains 1:1 aspect ratio width: imgElementWidth,
// Override border-radius and border to avoid transparent corners from rounded-full height: imgElementHeight,
const blob = await domtoimage.toBlob(cropContainer, {
width: containerSize,
height: containerSize,
style: {
borderRadius: '0',
border: 'none',
},
}); });
if (await hasTransparentPixels(blob)) { if (await hasTransparentPixels(blob)) {
@ -91,7 +83,6 @@
<FormModal size="small" title={$t('set_profile_picture')} {onClose} {onSubmit}> <FormModal size="small" title={$t('set_profile_picture')} {onClose} {onSubmit}>
<div class="flex place-items-center items-center justify-center"> <div class="flex place-items-center items-center justify-center">
<div <div
bind:this={cropContainer}
class="relative flex aspect-square w-62.5 overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary" class="relative flex aspect-square w-62.5 overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary"
> >
<PhotoViewer bind:element={imgElement} cursor={{ current: asset }} /> <PhotoViewer bind:element={imgElement} cursor={{ current: asset }} />