components/CropPopup.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="crop-popup">
-    <div class="crop-container">
-      <img ref="image" :src="imageSrc" alt="Picture">
-    </div>
-    <div class="image-preview"></div>
+    <img ref="image" :src="imageSrc" style="min-height: 500px;">
     <Button text="Crop" :callback="cropImage"></Button>
     <Button text="Cancel" :callback="closePopup"></Button>
   </div>
@@ -25,18 +22,23 @@ const cropper = ref<Cropper | null>(null);
 watch(image, (newValue) => {
   if (newValue) {
     cropper.value = new Cropper(newValue)
-    const selection = cropper.value.getCropperSelection()
-    if (selection) {
-      selection.precise = true
-      selection.aspectRatio = 1
-      selection.initialCoverage = 1
+    const cropperCanvas = cropper.value.getCropperCanvas()
+    const cropperSelection = cropper.value.getCropperSelection()
+    
+    if (cropperCanvas) {
+      cropperCanvas.background = false
+    }
+
+    if (cropperSelection) {
+      cropperSelection.precise = true
+      cropperSelection.aspectRatio = 1
+      cropperSelection.initialCoverage = 1
     }
   }
 });
 
 async function cropImage() {
   if (cropper) {
-    cropper.value?.element
     const selection = cropper.value?.getCropperSelection();
     if (selection) {
       const canvas = await selection.$toCanvas({width: 256, height: 256})
@@ -58,4 +60,12 @@ function closePopup() {
 </script>
 
 <style scoped>
+.crop-popup, #image-preview{
+  min-width: 20dvw;
+  min-height: 20dvh;
+}
+
+cropper-canvas {
+  min-height: 500px;
+}
 </style>

components/Settings/UserSettings/Profile.vue

@@ -22,16 +22,15 @@
 
       <UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
 
-      <CropPopup 
-        v-if="isCropPopupVisible" 
-        :imageSrc="cropImageSrc" 
-        :onCrop="handleCrop" 
-        :onClose="closeCropPopup" 
-      />
     </div>
   </div>
-
-  <div id="crop-container">
+  <div v-if="isCropPopupVisible" id="crop-popup-container">
+    <CropPopup
+      :imageSrc="cropImageSrc"
+      :onCrop="handleCrop"
+      :onClose="closeCropPopup"
+      id="crop-popup-preview"
+    />
   </div>
 </template>
 
@@ -101,8 +100,6 @@ async function changeAvatar() {
       const file = input.files[0];
       if (!file) return;
 
-      newPfpFile = file
-      
       const reader = new FileReader();
       reader.addEventListener("load", () => {
         if (reader.result && typeof reader.result === 'string') {
@@ -171,4 +168,21 @@ function closeCropPopup() {
 #profile-popup {
   margin-left: 2dvw;
 }
+
+#crop-popup-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background: rgba(0,0,0,0.5);
+}
+
+#crop-popup-preview {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 </style>