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>
 

static/profile_page.css

@@ -153,3 +153,30 @@
     border-style: solid;
     color: var(--text-main);
 }
+
+#resize_photo_box {
+    background-color: black;
+    position: absolute;
+    opacity: 40%;
+    width: var(--img-width);
+    height: var(--img-height);
+
+    --percent: 0.5;
+    --smalled-dim: min(var(--img-width), var(--img-height));
+
+    --smaller-pixel: calc((0.5 - (var(--percent)) / 2) * var(--smalled-dim));
+    --larger-pixel: calc((0.5 + (var(--percent)) / 2) * var(--smalled-dim));
+
+    clip-path: polygon(
+        0% 0%,
+        0% 100%,
+        var(--smaller-pixel) 100%,
+        var(--smaller-pixel) var(--smaller-pixel),
+        var(--larger-pixel) var(--smaller-pixel),
+        var(--larger-pixel) var(--larger-pixel),
+        var(--smaller-pixel) var(--larger-pixel),
+        var(--smaller-pixel) 100%,
+        100% 100%,
+        100% 0%
+    );
+}