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)