From 16fe828913ca26e30a19e14b525f46891da2ba7e Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Fri, 6 Feb 2026 14:21:56 +0100
Subject: [PATCH] fix: revert "fix(web): Ensure profile picture is cropped to
 1:1 ratio (#25892)" (#25956)

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

This reverts commit 3c77c724c5b51d2a22c9983a55dfd0ad3d421e45.
---
 .../modals/ProfileImageCropperModal.svelte    | 21 ++++++-------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/web/src/lib/modals/ProfileImageCropperModal.svelte b/web/src/lib/modals/ProfileImageCropperModal.svelte
index fc57964a6..dcce97a7c 100644
--- a/web/src/lib/modals/ProfileImageCropperModal.svelte
+++ b/web/src/lib/modals/ProfileImageCropperModal.svelte
@@ -16,7 +16,6 @@
   let { asset, onClose }: Props = $props();
 
   let imgElement: HTMLDivElement | undefined = $state();
-  let cropContainer: HTMLDivElement | undefined = $state();
 
   onMount(() => {
     if (!imgElement) {
@@ -52,23 +51,16 @@
   };
 
   const onSubmit = async () => {
-    if (!cropContainer) {
+    if (!imgElement) {
       return;
     }
 
     try {
-      // Get the container dimensions (which is always square due to aspect-square class)
-      const containerSize = cropContainer.offsetWidth;
-
-      // Capture the crop container which maintains 1:1 aspect ratio
-      // Override border-radius and border to avoid transparent corners from rounded-full
-      const blob = await domtoimage.toBlob(cropContainer, {
-        width: containerSize,
-        height: containerSize,
-        style: {
-          borderRadius: '0',
-          border: 'none',
-        },
+      const imgElementHeight = imgElement.offsetHeight;
+      const imgElementWidth = imgElement.offsetWidth;
+      const blob = await domtoimage.toBlob(imgElement, {
+        width: imgElementWidth,
+        height: imgElementHeight,
       });
 
       if (await hasTransparentPixels(blob)) {
@@ -91,7 +83,6 @@
 <FormModal size="small" title={$t('set_profile_picture')} {onClose} {onSubmit}>
   <div class="flex place-items-center items-center justify-center">
     <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"
     >
       <PhotoViewer bind:element={imgElement} cursor={{ current: asset }} />