fix(web): properly project profile picture #16095
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…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.
…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.
bo0tzz
changed the title
jrasm91
approved these changes
Feb 14, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR fixes an issue where users were unable to set a profile picture due to incorrect transparency detection. The issue originates from the
hasTransparentPixelsfunction in profile-image-cropper.svelte.Root Cause
The issue occurs because the blob generated in the
handleSetProfilePicturefunction does not accurately represent the portion of the image selected by the user. Users can zoom and drag the image in thephoto-viewercomponent, but the generated blob includes additional image areas and empty canvas space, leading to incorrect transparency detection.When the blob is projected onto a canvas for transparency checking, the canvas contains:
Since the
hasTransparentPixelsfunction evaluates the entire canvas, the presence of empty space causes false positives, preventing users from setting their profile pictures.Solution
imgElementheight and width to only get portion of the image that the user has selected.This fix ensures both transparency detection and the final profile picture selection work as expected.
Fixes #15812.
How Has This Been Tested?
This PR has been tested manually with different image types:
Before the Fix:
User-selected image:
Image projected onto canvas (incorrect):
Note: Contains empty space and additional image areas beyond the user’s selection.
After Transparency Fix:
User-selected image:
Image projected onto canvas (corrected):
Note: Now accurately reflects only the selected portion of the image.
After Fix:
Note: The selected profile pic now correctly matches the user’s selection.
Further Considerations
Checklist: