get a cropped square to exist

src/pages/profile_page.html

@@ -102,6 +102,7 @@
 </div>
 
 <div id="resize_photo_dialouge" class="card static_center hidden">
+    <div id="resize_photo_box"></div>
     <img id="new_profile_image" alt="new-profile-image" />
 </div>
 
@@ -199,9 +200,18 @@
             .getElementById("resize_photo_dialouge")
             .classList.remove("hidden");
 
-        document.getElementById("new_profile_image").src =
-            URL.createObjectURL(file);
+        var image = URL.createObjectURL(file);
+        const bitmap = await createImageBitmap(file);
 
+        var new_profile_image = document.getElementById("new_profile_image");
+        new_profile_image.src = image;
+        var resize_photo_box = document.getElementById("resize_photo_box");
+
+        resize_photo_box.style.setProperty("--img-width", bitmap.width + "px");
+        resize_photo_box.style.setProperty(
+            "--img-height",
+            bitmap.height + "px",
+        );
         return;
 
         const formData = new FormData();
@@ -225,8 +235,8 @@
             URL.revokeObjectURL(currentPreviewURL);
         }
 
-        img.src = URL.createObjectURL(file);
-        currentPreviewURL = img.src;
+        img.src = image;
+        currentPreviewURL = image;
     });
 </script>