Previously in the app, the QR code resizes as the user sets the width & height, causing significant layout shift. This is unpleasant for UX. It was done because the dom-to-image library requires the element to be visible in order to convert the element into an export format PNG/SVG/Blob.
Solution
This issue is fixed by:
Ensure qr code shown to users is always fixed width & height
Added a function to get element resize scale factor based on given width/height.
Before exporting as PNG/SVG/blob, use dom-to-image options to dynamically scale the qr-code image.
Resolves #4
Context
Previously in the app, the QR code resizes as the user sets the width & height, causing significant layout shift. This is unpleasant for UX. It was done because the
dom-to-image
library requires the element to be visible in order to convert the element into an export format PNG/SVG/Blob.Solution
This issue is fixed by:
options
to dynamically scale the qr-code image.Before
At width/height set as 2000px
After
At width/height set as 2000px