Fix QR Code Resizing Visually

[lyqht]

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:

• 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.

Before

At width/height set as 2000px

After

At width/height set as 2000px

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
styled-qr-code-generator	✅ Ready (Inspect)	Visit Preview	Aug 5, 2023 5:00pm