QR Code Generate using JavaScript Tutorial
Hy friends, Today we will learn how to create a QR code Generate in Javascript. So let's Start
ЁЯЫС Live Demo
Please follow the steps
Step 1 - Click here to download QR code js file and include it in <head> tag.
<script type="text/javascript" src="qrCode.js"></script>
Step - 2
Create an HTML For QR code
Create an HTML For QR code
<div class="slidecontainer">
<b>
<label class="name">Type your Name or Link :</label>
</b>
</div><br />
<div class="slidecontainer">
<input id="qr_code" type="text" value="" />
<div id="get_code" style="display: none;">
<div id="waiting" style="display: none;"> Fetching Your QR Code....</div>
<br /><br />
Get your QR Code :
<br /><br />
<div id="auc_qr_img" style="display: none;"></div>
<br /><br />
<div><button id="down_qr_cd">Download Your QR Code</button></div>
</div>
</div>
Step - 3
Create Css
<style>
#down_qr_cd{
background-color: #4caf50;
border: none;
color: white;
cursor: pointer;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
}
#qr_code{
font-weight: bold;
height: 50px;
text-align: center;
width: 100%;
}
</style>
Step - 4
Js Code
<script type="text/javascript">
$("#qr_code").on('keyup',function(e){
$("#get_code").show();
$("#auc_qr_img").show();
$("#waiting").show();
var v = $("#qr_code").val().trim();
if(v && v.length > 0 && v !== ''){
$("#auc_qr_img").text(" ");
new QRCode(document.getElementById("auc_qr_img"), v);
$("#waiting").hide();
}else{
$("#get_code").hide();
}
});
$("#down_qr_cd").on('click',function (e){
var img = $("#auc_qr_img canvas").get(0).toDataURL('image/png');
var dl = document.createElement('a');
dl.setAttribute('href', img);
dl.setAttribute('download', 'qrcode.png');
// simulate a click will start download the image, and name is qrcode.png.
dl.click();
});
</script>
Yeah! You have learned ЁЯШК
I hope you understood and like this article. if you like it so, please give feedback in the comment section.
If any mistakes I made here, so please let me know and improve me.If you have any query, feel free to ask me ЁЯШКRecommended Post
- How to Scroll horizontal Sub Menu with Active Class while page scroll Using JavaScript
- How to Encode and Decode Strings with Base64 in JavaScript examples
- How to shift button in Clock wise in javaScript using ECMA6?
- How to Reset DropDownList Selection Using jQuery?
- Create dynamic drop-down list option with JavaScript and jQuery
- Onclick show and hide div using JQuery with examples
- How to Get All Google play store apps List using PHP Scraper?
- How to pass a variable from the command line using PHP?
- How to Submit Registration and Login Form in PHP?
- Introduction PHP
- how to declare variables in PHP?
- What things you need to install PHP?
- How to get meta tags in 2 easy way in PHP
Post a Comment
Please do not enter any spam link in the comment section.