Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

January 18, 2023 07:27 am GMT

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>

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 elementlet img = document.createElement("img");\\select the div from htmllet qr = document.querySelector(".qr-code");\\ stick the generated image to html divqr.appendChild(img);

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");    }

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}`};

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>

Now Lets Create Download Button :

<button id="mybutton" >Download</button>

And

//get the html buttonlet btnDownload = document.querySelector('#mybutton');//get the html imagelet imgdwn = document.querySelector('img');

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');});

-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);});

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);}

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>

* 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;}

* 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);}

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

Original Link: https://dev.to/developedbyjk/qr-code-generator-download-qr-as-image-15gg

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To