From b1f05fc18bbf6770bd4b39059704eec30458cf42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mangat=20Singh=20Toor=20=7C=20=E0=A8=AE=E0=A9=B0=E0=A8=97?= =?UTF-8?q?=E0=A8=A4=20=E0=A8=B8=E0=A8=BF=E0=A9=B0=E0=A8=98=20=E0=A8=A4?= =?UTF-8?q?=E0=A9=82=E0=A8=B0?= Date: Fri, 14 Feb 2025 07:49:22 -0800 Subject: [PATCH] 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 --- .../shared-components/profile-image-cropper.svelte | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/web/src/lib/components/shared-components/profile-image-cropper.svelte b/web/src/lib/components/shared-components/profile-image-cropper.svelte index b8ac866761..487a6470a8 100644 --- a/web/src/lib/components/shared-components/profile-image-cropper.svelte +++ b/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,