Fix Blurry Issue on Semantic Reader_Part1 #183
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
huytr1995
changed the title
ericmarsh995
approved these changes
Aug 26, 2022
|
Created issue for rotation breaking #184 |
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
Recently our user noticed that the image on Semantic Reader is really blurry. This PR addresses this
Reviewer Instructions
First thing is to eliminate zoomMultiplier when it comes to canvas size because zoom multiplier is just how fast the zoom grow (like 100-120 or 120-140) so we dont need that and also rotation. Adding another SCALE_BOOST variable with default value to be 2 to increase the sharpness of our image on canvas overall (cant go more than 2 due to Safari will crash due to the way they render their canvas). The next PR will add a react.useEffect to listen for devicePixelRatio change and also scale change to repopulate the imageUrl again.
Testing Plan
Verify if the image display is more crisp compare to previous. Other than that yarn lint, format, test
Output / Screenshots
Look at how sharp the image now compare to previous
Since i dont have my monitor now i change the scale of my screen to simulate that
A11y
No A11y involvement.