fix(web): properly project profile picture (#16095)

* fix(profile-image-cropper): ensure correct image area is saved after transparency check

Fixed an issue where users could not set a profile picture due to incorrect transparency detection.
After addressing transparency detection by passing explicit dimensions, another issue arose where the
generated blob did not represent the correct cropped image area. To fix this, a new cropped blob was generated using the canvas that was used to check for transparent pixels.

- Pass image width and height explicitly to `hasTransparentPixels` for accurate processing.
- Return both transparency status and the correctly cropped image blob.
- Ensure the final uploaded image is taken from `croppedImageBlob` to reflect user adjustments.

* chore: run pr web checklist. No issues in the changed file.

* fix(profile-image-cropper): ensure correct image area is saved after transparency check

Fixed an issue where users could not set a profile picture due to incorrect transparency detection.
To fix this, a new cropped blob was generated using the height and width of the imgElement.

Note: this is a simpler fix than the one in the previous commit.

* lint

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/shared-components/profile-image-cropper.svelte

@@ -58,7 +58,13 @@
     }
 
     try {
-      const blob = await domtoimage.toBlob(imgElement);
+      const imgElementHeight = imgElement.offsetHeight;
+      const imgElementWidth = imgElement.offsetWidth;
+      const blob = await domtoimage.toBlob(imgElement, {
+        width: imgElementWidth,
+        height: imgElementHeight,
+      });
+
       if (await hasTransparentPixels(blob)) {
         notificationController.show({
           type: NotificationType.Error,