Jump to content
Welcome, welcome! Come in and register, and have some developer coffee. 👨‍💻 ×

[JS/Node] Creating a QR Code Generator Under 15 minutes


Recommended Posts

Hi GG Kakis,

Let's learn how to create a super easy QR code generator to add into your portfolio (and impress your interviewers!?!).

Requirements

First, create a new project folder and give it a name. I'll name it KakiQrGen. Next, create a HTML file and name it index.html. 

Now. open up the project folder in your favorite code editor. (I'm using VSCode)

Open up a new terminal in the project directory and run the following. What is does is it will create a package.json file in the directory. The -y flag is shorthand for yes. If you wish to manually input your project details (author name, version number, description...), simply remove the flag. 

npm init -y

Next, install the qrcode library by running the following command in your terminal.

npm install --save qrcode

Your folder structure should look like this now:

2adad0035aea43e19004ec9d278cde97.png

We now have everything setup and it's time to write some code, kakis! Go into your index.html and start giving it the good ol' html structure.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>KakiQrGen</title>
</head>
  
<body>
  
</body>
</html>

To use the functions provided by the qrcode library, we need to include it in the script tag of our HTML code. Add the following into the <head> section.

<script src="/node_modules/qrcode/build/qrcode.min.js"></script>

 

We will need a canvas to render our generated QR code. Let's add a canvas tag in our <body> section and give it an id. We will use the id later.

<canvas id="qrcode"></canvas>

 

You should have the following code structure now (the arrangement of tags may differ but it's fine!).

50f0b62a945214aad4c1d7d0440fbb47.png

 

To write the logic for generating our QR code, we need another script tag to write our JavaScript code. Insert one under the <canvas> tag.

<script>
  const qrCanvas = document.getElementById('qrcode');
  QRCode.toCanvas(qrCanvas, 'https://kaki.gg/');
</script> 

The function is fairly simple to use and understand. We provided the toCanvas method with the <canvas> element and the text in the second parameter. The third param takes in options and it is optional. For example, you can provide the errorCorrectionLevel option as follow:

QRCode.toCanvas(qrCanvas, 'https://kaki.gg/', {
	errorCorrectionLevel: 'H'
});

 

Quote

Error correction capability allows to successfully scan a QR Code even if the symbol is dirty or damaged

That's it! To see the magic, open up your index.html file in your browser and you'll see the QR code!

Without error correction:

image.png

 

With error correction:

image.png

 

If you wish to step up the game, feel free to add in an <input> field and a <button> to allow your users to dynamically generate QR code in your website.

 

Manage to follow? Show-off your work in the comment.

 

The KakiQrGen repository can be found on Kaki.GG's GitHub.

 

Have fun!

  • Love 1
  • Like 1
Link to post
Share on other sites
  • 3 weeks later...
42 minutes ago, FlierMate said:

Since I already bought a domain https://qrcodeonline.net/ last year, I might just as well point it to that.

Looking for improvement, @S.

Awesome! Looking forward for you to paint yours pretty. Here's mine
image.png

You can also allow users to generate QR for images instead of only links 😄

  • Love 1
Link to post
Share on other sites
12 minutes ago, S. said:

Awesome! Looking forward for you to paint yours pretty. Here's mine
image.png

You can also allow users to generate QR for images instead of only links 😄

Great!  I have seen at least one online QR code generator can generate QR code instantly without the need for user to click button.  Its QR code changes whenever the input text has changed.  Do you know how to do that?

Link to post
Share on other sites
8 minutes ago, FlierMate said:

Great!  I have seen at least one online QR code generator can generate QR code instantly without the need for user to click button.  Its QR code changes whenever the input text has changed.  Do you know how to do that?

You can add an event listener to the input tag and watch for changes. Call the toCanvas() method on input change =). Here's a reference https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

  • Thanks 1
Link to post
Share on other sites

This is my code with reference to other sources.

Now I know how to download as image from canvas.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>qrcodeonline.net</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="node_modules/qrcode/build/qrcode.min.js"></script>
    </head>

    <body>
        <div>
            <input placeholder="Type something here" id="encode" name="encode">
        </div>

        <div>
            <canvas id="qrcode"></canvas>
        </div>
        
        <div>
            <a href="#" class="button" id="dl" download="QRCODE.png">Download</a>
        </div>
 
        <script>
            const input = document.querySelector("input");
            const qr = document.getElementById("qrcode");
            const button = document.getElementById('dl');

            input.addEventListener("input", function (e) {
                QRCode.toCanvas(qr, e.target.value, {
                    errorCorrectionLevel: 'L'
                });
            });
            button.addEventListener('click', function (e) {
                var dataURL = qr.toDataURL('image/png');
                button.href = dataURL;
            });
        </script> 
    </body>
</html>

 

Link to post
Share on other sites
1 hour ago, FlierMate said:

This is my code with reference to other sources.

Now I know how to download as image from canvas.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>qrcodeonline.net</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="node_modules/qrcode/build/qrcode.min.js"></script>
    </head>

    <body>
        <div>
            <input placeholder="Type something here" id="encode" name="encode">
        </div>

        <div>
            <canvas id="qrcode"></canvas>
        </div>
        
        <div>
            <a href="#" class="button" id="dl" download="QRCODE.png">Download</a>
        </div>
 
        <script>
            const input = document.querySelector("input");
            const qr = document.getElementById("qrcode");
            const button = document.getElementById('dl');

            input.addEventListener("input", function (e) {
                QRCode.toCanvas(qr, e.target.value, {
                    errorCorrectionLevel: 'L'
                });
            });
            button.addEventListener('click', function (e) {
                var dataURL = qr.toDataURL('image/png');
                button.href = dataURL;
            });
        </script> 
    </body>
</html>

 

Awesome man! 😄😄 😄

  • Thanks 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...