DEV Community

Cover image for QR Code Generator + Download QR as Image
developedbyjk
developedbyjk

Posted on

QR Code Generator + Download QR as Image

๐Ÿ™‹โ€โ™‚๏ธHello Friends!

๐Ÿ‘จโ€๐Ÿ’ปSo I tried building QR code Generator from input link with simple API And added the feature to Download That QR Code & Yeah๐Ÿฅต faced a lot of bugs dealing with two different APIs but finally Made it๐Ÿคฉ

Let me show you how simple it is!๐Ÿ˜‰
(full code below the article)


๐Ÿ“ŒStep 1
๐Ÿ‘‰ We will need an input to paste our URL and a button to do work with that input

<input type="text" id="input"/>
<button onclick="generate()">Generate</button>
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰we added generate function that will trigger JavaScript
๐Ÿคพโ€โ™‚๏ธBut we need to show out output so we will create an an image


๐Ÿ“ŒStep 2

\\create image element
let img = document.createElement("img");

\\select the div from html
let qr = document.querySelector(".qr-code");

\\ stick the generated image to html div
qr.appendChild(img);
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰Okay so now ๐Ÿ–
Input and button - Ready โœ…
div to get output - Ready โœ…


๐Ÿ“ŒStep 3
๐Ÿ‘‰The Third and main step is to add JavaScript code to generate QR

๐ŸšฆLet get the input value from input tab

function generate(){
    let input = document.getElementById("input");
    }
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰Next we will check if the value is inserted or not before clicking the generate button ๐ŸŽฏ

The code will only run if there is value in input ๐Ÿ˜‰

if yes!๐Ÿคฉ
then we will search the qr img by API:๐Ÿค“

๐Ÿ‘‰we will use template literal to Pass Value of input that we got


https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${input.value}

๐Ÿ‘‰And Boom๐Ÿ’ฅ The API will do its work๐Ÿ˜Ž

if(input.value){
        img.src = `https://api.qrserver.com/v1/
        create-qr-code/?size=180x180&data=${input.value}`
};

Enter fullscreen mode Exit fullscreen mode

Now Let's Download Our QR ๐Ÿ˜

๐Ÿ‘‰To download our image we will use Another API FileSaver.js

๐Ÿ“ŒStep 1
๐Ÿ‘‰Adding the Cdn in Head of Html:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" integrity="sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰Now Lets Create Download Button :๐ŸŽจ

<button id="mybutton" >Download</button>
Enter fullscreen mode Exit fullscreen mode

And๐Ÿ‘€

//get the html button
let btnDownload = document.querySelector('#mybutton');
//get the html image
let imgdwn = document.querySelector('img');
Enter fullscreen mode Exit fullscreen mode

๐Ÿ“ŒStep 2

๐Ÿ‘‰Now Add a Event Listener that work when we click download button
So when we click it:๐Ÿง

-๐Ÿ first get the img src and set in imagePath โœ…

btnDownload.addEventListener('click', () => {
//getting the src of image
    let imagePath = imgdwn.getAttribute('src');

});
Enter fullscreen mode Exit fullscreen mode

-๐Ÿฆsecond get the img name from the urlโœ…
eg : https://httpbin.org/image get the >>image and add + '.jpg' at end

btnDownload.addEventListener('click', () => {
//getting the src of image
    let imagePath = imgdwn.getAttribute('src');

//image format
    let fileName = getFileName(imagePath);

 //eg :saveAs("https://httpbin.org/image", "image.jpg"); 
    saveAs(imagePath, fileName);

});


Enter fullscreen mode Exit fullscreen mode

๐Ÿงso it will be image.jpg from the url to do that we will create getFileName(imagePath) Function

๐Ÿ‘‰after getting the name of image (eg: image.jpg) from function
we will pass into saveAs(imagePath, fileName); ๐Ÿ˜€

function getFileName(str) {
//search '=' from url starting from end and give the output
    let gotstr = str.substring(str.lastIndexOf('=') + 1 );

    let format = ".jpg";
// return the format ie image.jpg
    return  gotstr.concat(format);
}
Enter fullscreen mode Exit fullscreen mode

Congratulation๐ŸŽ‰โœจ
You Successfully๐Ÿ† Created a QR code Generator ๐ŸŽ€ and with Download Button๐Ÿ˜

Full Code Below ๐Ÿ‘‡

*๐Ÿ“Œ HTML ๐Ÿ“™ *

<!DOCTYPE html>
<html>
<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" integrity="sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</head>
<body>
    <div class="container">

            <div class="input-container">
                <input type="text" id="input" placeholder="Enter 
                 Url" autocomplete="off"/>
                <button onclick="generate()">Generate</button>
            </div>

        <div class="qr-code"></div>
        <button id="maindwnbtn" ><a href="#" id="mybutton" 
        download="qr">Download</a></button>

        </div>
<a href="linktr.ee/developedbyjk">@developedbyjk</a>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

*๐Ÿ“Œ CSS - if you want ๐Ÿ˜‰ ๐Ÿ“— *

@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
body{
    font-family: 'Space Mono', monospace;
    background-color: aliceblue;
}
.container{
    max-width: 400px;
    margin: 10%;
    max-height: 500px;
    padding: .2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color:aliceblue;
}
.input-container{
    display: flex;
    flex-direction: column;
}
.input-container input{
    padding: 12px;
    outline: none;
    border-radius: 5px;
    border: 2px dashed #c7c7c7;
      font-family: 'Space Mono', monospace;
}
.qr-code{
    margin-top: 100px;
    height: 200px;
    width: 200px;
     border: 2px dashed #c7c7c7;
}

.input-container button{
    padding: 0.5rem;
    height: 40px;
    color: #fff;
    font-size: 1rem;
    margin-top: .5rem;
    outline: none;
    border-radius: 90px;
    border: none;
    background-color: #332fd0;
    cursor: pointer;
      font-family: 'Space Mono', monospace;
}


#maindwnbtn{
        padding: 0.5rem;
    height: 40px;
    font-size: 1rem;
    margin-top: 80%;
    outline: none;
    border-radius: 90px;
    border: none;
    background-color: #332fd0;
    cursor: pointer;

}


#maindwnbtn a{
    color: #fff;
    text-decoration:none;
    font-family: 'Space Mono', monospace;
}
.qr-code{
    width: 100%;
    height: 180px;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

*๐Ÿ“Œ JavaScript ๐Ÿ“— *

let img = document.createElement("img");
let qr = document.querySelector(".qr-code");
qr.appendChild(img);
function generate(){
    let input = document.getElementById("input");
    if(input.value){
        input.style.borderColor = "#c7c7c7";
        img.src = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${input.value}`;

    }
    else{
        input.style.borderColor="red";
        return false;
    }
    input.value = "";


}


let btnDownload = document.querySelector('#mybutton');
let imgdwn = document.querySelector('img');



btnDownload.addEventListener('click', () => {
    let imagePath = imgdwn.getAttribute('src');
    let fileName = getFileName(imagePath);
    saveAs(imagePath, fileName);
});

function getFileName(str) {
    let gotstr = str.substring(str.lastIndexOf('=') + 1 );
    let format = ".jpg";
    return  gotstr.concat(format);
}


Enter fullscreen mode Exit fullscreen mode

Wait ๐Ÿ˜ณ
You reached so Below ๐Ÿคฏ I can't Believe it

You seem great Diver ๐Ÿ˜๐Ÿ˜‰

So Hi๐Ÿ‘‹ My diver Friend๐Ÿ‘จ
Myself JK ๐Ÿ‘จโ€๐Ÿ’ป
I share Stuff Related to Web Design & Development
If you like this๐Ÿ˜„

I'm Sure you'll Love My Instagram Page Where I share the same,but with Visual Taste.๐Ÿค๐Ÿ˜Ž๐Ÿ‘€

Hope we meet There๐Ÿ˜‰๐ŸŽ€๐Ÿ

Happy Coding ๐Ÿ’ชโœจ๐ŸŽ‰

My All Links linktr.ee/developedbyjk

Top comments (0)