Home
codepen
Script

Dynamic QR Code Generator & Export PNG and SVG Tool

Powerful dynamic QR code generator tool for blogger and source code html, css, js

Dynamic QR Code Generator & Export PNG and SVG Tool

Dynamic QR Code Generator

QR codes are a popular way to encode and share information in a compact and easily scannable format. With the help of a QR code generator tool, you can quickly and easily create QR codes for your personal or business needs. In this article, we will introduce a dynamic QR code generator and export tool that you can use for free. This tool allows you to generate QR codes and export them as PNG or SVG files, making it a versatile and useful tool for a wide range of applications.

Features of the Dynamic QR Code Generator & Export Tool

  • Generates QR codes dynamically based on the data entered by the user.

  • Supports export of QR codes as PNG and SVG files.

  • Allows customization of the QR code size and color.

  • Easy to use and free to download and use.

How to Use the Dynamic QR Code Generator & Export Tool

Using the dynamic QR code generator and export tool is easy and straightforward. Simply follow these steps:

  • Enter the data you want to encode in the QR code in the input field provided.
  • Choose the size and color of the QR code, if desired.
  • Click the "Generate QR Code" button to generate the QR code.
  • If desired, you can export the generated QR code as a PNG or SVG file by clicking the "Export as PNG" or "Export as SVG" button.

Creating a Dynamic QR Code Generator using HTML, CSS, JavaScript, and jQuery

In this article, we'll walk you through the process of creating a dynamic QR Code generator using HTML, CSS, JavaScript, and jQuery. With this tool, you'll be able to generate QR codes on the fly and customize them to your liking. Here's what you'll need:

Note: The above code is an example of an HTML file that creates a dynamic QR code generator tool. The tool allows users to select the type of QR code they want to generate - URL, phone, SMS, plain text, or email - and input the relevant information. The QR code is then generated and displayed on the screen. Additionally, users can download the QR code as a PNG or SVG file by clicking on the corresponding buttons. The file uses CSS for styling and JavaScript (jQuery and QRCode.js) for generating the QR code and handling user interactions. The HTML to Image library is also used for exporting the QR code as an image. This code can be modified and customized as per the requirement. To use this code, you would simply need to save it as an .html file and open it in a browser.

html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>CodePen - Dynamic QR Code  Generator &amp; Export PNG  and SVG</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<h1>Dynamic QR Code Generator & Export PNG and SVG</h1>
<input type="radio" id="tab1" name="tab" value="url" checked>
<label for="tab1">URL</label>
<input type="radio" id="tab2" value="phone" name="tab">
<label for="tab2">Phone</label>
<input type="radio" id="tab3" value="sms" name="tab">
<label for="tab3">SMS</label>
<input type="radio" id="tab4" value="text" name="tab">
<label for="tab4">Plain text</label>
<input type="radio" id="tab5" value="email" name="tab">
<label for="tab5">Email</label>
<br><br>
 <article>
  <input type="text" name="url" id="url" placeholder="https://www.shopify.com" pattern="(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9]{1,63}\.[a-z0-9]{2,63}\b([-a-zA-Z0-9@:%_\+.~#?&amp;/=]*)">
</article>
<article>
  <input name="phone" id="phone" type="tel" placeholder="+1">
</article>
<article>
  <p>Your Phone Number</p>
  <input name="phone" id="sms_phone"
         type="tel" placeholder="+1" aria-required="false" aria-label="+1" value=""
         aria-invalid="true">
  <p> Your Message</p>
  <textarea id="sms_text" placeholder="Add it here..."></textarea>
</article>
<article>
  <textarea id="plain_text" placeholder="Add it here..." maxlength="1000"></textarea>
</article>
<article>
  <label>Email</label>
  <input name="email" id="email" type="email" placeholder="example@example.com">
  <label>Subject</label>
  <input name="message" id="subject" type="text" placeholder="Subject">
  <label>Your Message</label>
  <textarea id="message" placeholder="Add it here..."></textarea>
</article>
<br>
<div id="qrcode"></div>
<br><div id="previewImg"></div>


<a class="button qr-png-download" href="javascript:;" title="Download PNG">Download PNG</a>&nbsp; &nbsp; &nbsp;
<a class="button qr-svg-download" href="javascript:;" title="Download SVG">Download SVG</a>

<br><br>


<!-- partial -->
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/qrcode.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.js'></script><script  src="./script.js"></script>
</body>
</html>

css 

body {
  font-family: sans-serif;
  text-align: center;
}

h1 {
  margin: 40px 0 20px;
}

input[type=radio] {
  display: none;
}

label {
  display: inline-block;
  padding: 10px 20px;
  background-color: lightgray;
  color: #333;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
  transition: all 0.2s ease-in-out;
}

label:hover {
  background-color: blue;
  color: #fff;
}

input[type=radio]:checked + label {
  background-color: blue;
  color: #fff;
}

article {
  display: none;
  padding: 20px;
  background-color: lightgray;
  border-radius: 4px;
  margin: 20px 0;
}

article.on {
  display: block;
}

input[type=text],
input[type=tel],
textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid lightgray;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}

#qrcode {
  margin: 40px 0;
}

#previewImg {
  margin: 40px 0;
}

.button {
  background-color: blue;
  color: #fff;
  padding: 10px 20px;
  border: 1px solid lightgray;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.button:hover {
  background-color: #fff;
  color: blue;
}

@media (max-width: 767px) {
  label {
    display: block;
    margin: 20px 0;
  }

  article {
    margin: 20px 0 0;
  }
}

JavaScript & jQuery

$('[name=tab]').each(function(i,d){
        var p = $(this).prop('checked');
        if(p){
            $('article').eq(i)
                .addClass('on');
        }
    });

    $('[name=tab]').on('change', function(){
        var p = $(this).prop('checked');

        // $(type).index(this) == nth-of-type
        var i = $('[name=tab]').index(this);

        $('article').removeClass('on');
        $('article').eq(i).addClass('on');
    });

function qr_generate() {
  $('#qrcode').empty();
  let select_val = $('input[type=radio]:checked').val();
  if(select_val == 'url') {
    let url = $('#url').val();
    if(url == '' || url == null) {
      blank_qr();
    } else {
      $('#qrcode').qrcode({width: 190,height: 190,text: url});
    }
  } else if(select_val == 'phone'){
    let phone = $('#phone').val();
    if(phone == '' || phone == null) {
      blank_qr();
    } else {
      $('#qrcode').qrcode({width: 190,height: 190,text: 'tel:'+phone});
    }
  } else if(select_val == 'sms'){
    let phone = $('#sms_phone').val();
    let text = $('#sms_text').val();
    if(phone == '' || phone == null) {
      blank_qr();
    } else {
      $('#qrcode').qrcode({width: 190,height: 190,text:'smsto:'+phone+':'+text});
    }
  } else if(select_val == 'text') {
    let plain_text = $('#plain_text').val();
    if(plain_text == '' || plain_text == null) {
      blank_qr();
    } else {
      $('#qrcode').qrcode({width: 190,height: 190,text: plain_text});
    }
  } else if(select_val == 'email'){
    let email = $('#email').val();
    let subject = $('#subject').val();
    let message = $('#message').val();
    if(email == '' || email == null) {
      blank_qr();
    } else {
      $('#qrcode').qrcode({width: 190,height: 190,text:'mailto:'+email+'?subject='+subject+'&body='+message});
    }
  }
}

function blank_qr() {
  $('#qrcode').empty();
  $('#qrcode').qrcode({width: 190,height: 190,text: 'https://codepen.io/shehbaz72',rander:'svg'});
}
$('input').on('change keyup', function(){
  qr_generate();
})
$('textarea').on('change keyup', function(){
  qr_generate();
})
$(document).ready(function(){
  qr_generate();
})

function download(canvas, filename) {
        var canvas = document.getElementById('canvas');
        var lnk = document.createElement('a'), e;

        lnk.download = filename;

        lnk.href = canvas.toDataURL("image/png;base64");

        if (document.createEvent) {
            e = document.createEvent("MouseEvents");
            e.initMouseEvent("click", true, true, window,
                0, 0, 0, 0, 0, false, false, false,
                false, 0, null);

            lnk.dispatchEvent(e);
        } else if (lnk.fireEvent) {
            lnk.fireEvent("onclick");
        }
    }


    $('.qr-png-download').on('click', function (){
        $('canvas').attr('id', 'canvas');
         var canvas = document.getElementById('canvas');
      download(canvas, 'qrcode.png')
      
    })
$('.qr-svg-download').on('click', function (){
        
      htmlToImage.toSvg(document.getElementById('qrcode'), { })
        .then(function (dataUrl) {
          let svg = decodeURIComponent(dataUrl.split(',')[1])
         const base64doc = btoa(unescape(encodeURIComponent(svg)));
          const a = document.createElement('a');
          const e = new MouseEvent('click');
          a.download = 'qrcode.svg';
          a.href = 'data:image/svg+xml;base64,' + base64doc;
          a.dispatchEvent(e);       
        });
    })
DEMO

That's all you need to create a basic dynamic QR code generator. You can now add additional customization options and styles to your tool as desired.

Note: The QR code generation in this example is using the QR code generation API from qrserver.com. You can use any other QR code generation API of your choice.

With this tool, you'll be able to generate QR codes on the fly, without the need for any additional software. Try it out and see how it works for you!

Conclusion

The dynamic QR code generator and export tool is a convenient and versatile tool for generating QR codes and exporting them as PNG or SVG files. Whether you need a QR code for personal or business use, this tool is a great resource that is both easy to use and free to download and use. Give it a try today!

1 comment

  1. Hi