[feat]: added support to download the qrcode as png

AnishDe12020 commented 2 years ago

Related Issue

Closes: #2

Describe the add-ons or changes you've made

I have added a download button (SVG from heroicons) which when clicked, download the qrcode as an image. To make things simples, I have added a line of code in the qrcode.js file which ass an id of qr-code-image to the image element housing the qr code. On clicking download, the base64 src is obtained from the image, and the download code is executed.

Type of change

What sort of change have you made:

[ ] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[ ] Code style update (formatting, local variables)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[ ] This change requires a documentation update

How Has This Been Tested?

I have uploaded an image (as a file), got the qrcode generated and clicked the download button which triggered a download and I have opened the generated png and it matched the shown png. I have also scanned it with my phone and it worked as intended.

Checklist:

[x] My code follows the guidelines of this project.
[x] I have performed a self-review of my own code.
[x] I have commented my code, particularly wherever it was hard to understand.
[ ] I have made corresponding changes to the documentation.
[x] My changes generate no new warnings.
[x] I have added things that prove my fix is effective or that my feature works.
[ ] Any dependent changes have been merged and published in downstream modules.

Screenshots (Only for Front End and UI/UX Designers)

Original	Updated

akhileshthite commented 2 years ago

Did you format qrcode.js file with prettier?
Please use imperative tense to write commit messages, "Add" instead of "Added".

akhileshthite commented 2 years ago

Issue 1: Increase the size of this download SVG, it should match the size of other SVGs. Screenshot 2021-12-05 at 8 20 59 PM copy

akhileshthite commented 2 years ago

Issue 2: The footer is not visible, move the download SVG up.

Screenshot 2021-12-05 at 8 20 59 PM

akhileshthite commented 2 years ago

Issue 3: Make the Download SVG centered as per the generated QR code. Screenshot 2021-12-05 at 8 45 33 PM

akhileshthite commented 2 years ago

@AnishDe12020, Resolve those issues, then I'll review it again.

AnishDe12020 commented 2 years ago

@AnishDe12020, Resolve the those issues, then I'll review it again.

Yep, I have resolved them, can you review it?

akhileshthite commented 2 years ago

@AnishDe12020, Resolve the those issues, then I'll review it again.

Yep, I have resolved them, can you review it?

Can you please check all of my review comments carefully? Go through it. I expect reply for each review comment with FIX commit link.

AnishDe12020 commented 2 years ago

Did you format qrcode.js file with prettier?

Please use imperative tense to write commit messages, "Add" instead of "Added".

Ya, I had used prettier, it formats on save actually. I am not sure if I can change the commit message now

AnishDe12020 commented 2 years ago

Issue 3: Make the Download SVG centered as per the generated QR code. Fixed in https://github.com/AkhileshThite/dscan/pull/9/commits/da00d8b8b00d49f0bec6bd7e7c64d1beb72bf66f

AnishDe12020 commented 2 years ago

Issue 1: Increase the size of this download SVG, it should match the size of other SVGs.

Fixed in https://github.com/AkhileshThite/dscan/pull/9/commits/da00d8b8b00d49f0bec6bd7e7c64d1beb72bf66f

AnishDe12020 commented 2 years ago

Issue 2: The footer is not visible, move the download SVG up.

Fixed in https://github.com/AkhileshThite/dscan/pull/9/commits/5d6d5f4cd04c567894988ff9d5e61c883af93bae

akhileshthite commented 2 years ago

Did you format qrcode.js file with prettier?

Please use imperative tense to write commit messages, "Add" instead of "Added".

Ya, I had used prettier, it formats on save actually. I am not sure if I can change the commit message now

No need to change now, but keep that in mind.

akhileshthite commented 2 years ago

Change in CSS header: margin-bottom: 40px;

akhileshthite commented 2 years ago

@AnishDe12020 Make these 3 changes.

AnishDe12020 commented 2 years ago

@AnishDe12020 Make these 3 changes. I have made them in https://github.com/AkhileshThite/dscan/pull/9/commits/d295fffd833e39076465d03476c4fa34603d7bd6. Do let me know if it is fine

akhileshthite commented 2 years ago

@AnishDe12020 Make these 3 changes. I have made them in d295fff. Do let me know if it is fine

Good work.

p2plabsxyz / dscan