diff --git a/web/src/lib/modals/ProfileImageCropperModal.svelte b/web/src/lib/modals/ProfileImageCropperModal.svelte
index fc57964a6b..dcce97a7c1 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 }} />