<p style="text-align: justify;"><span style="font-weight: 400;">If the phase “A picture tells a thousand words” could be put to great use then this would be it…</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">This is a QR code, an abbreviation of Quick-Response Code used to store data using a series of black and white squares that can be read by various devices including smart phones. It is a technology being in use from 90’s to link text, websites, documents, phone numbers, etc. Initially, QR codes were used by the automotive industry in Japan to track vehicles during manufacture. And today, from tracking applications to entertainment sectors, marketing, mobile phone apps, it is has evolved far better across the globe. It is much safer to say that the technology has become a crucial part of our day to day lives. </span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Some of the common example of how QR codes have been used: </span></p>
<ul style="text-align: justify;">
<li style="font-weight: 400;"><span style="font-weight: 400;">Website URLs &#8211; go directly to a site by simply scanning with your smartphone. </span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Pre-populated emails</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Contact cards</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Pre-populated SMS messages</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Map / location coordinates</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Calendar appointments</span></li>
</ul>
<p style="text-align: justify;"><span style="font-weight: 400;">Unlike those traditional UPC codes, they have become very popular for a wide range of applications in the shopping and advertising industries. It’s more like if a user finds a QR code on any of their products they just require to scan out the code using their phone or a scanner and check out the content. </span></p>
<p style="text-align: justify;"><b>Generating QR Code using jQuery</b></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Well if you hire a skilled coder or someone who have a good hands on JavaScript or jQuery, CSS or HTML then this is going to be very easy for you. However, jQuery does not have any inbuilt way to generate the code but using a plugin can definitely make some difference. Let’s find out how?</span></p>
<p style="text-align: justify;"><b> Step 1</b></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Download core file from the jQuery’s official website. </span></p>
<p style="text-align: justify;"><b>Step 2</b></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Go to the GIT Hub page, download and include the jquery.qrcode.min.js file</span></p>
<p style="text-align: justify;">Your code may look something like these:</p>
<p style="text-align: justify;"><b>Step 3</b></p>
<p style="text-align: justify;"><span style="font-weight: 400;"> Create a DOM element like a DIV or a span etc. This will be used as a container for the generated QR code. Our example includes DIV</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;"><;div id=&#8221;qrcodeholder&#8221;>; <;/div>; </span></p>
<p style="text-align: justify;"><b>Step 4</b></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Last but certainly not the least, it’s time to invoke the QR code plugin function with parameters as well as the data you want to encode in the QR code. The parameters for the jQuery QR code plugin includes the text or data that needs to be encoded, the width and height of the QR code generated and the rendering mode. </span></p>
<p style="text-align: justify;"><span style="font-weight: 400;"><;script type=&#8221;text/javascript&#8221;>;</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">//Wrap it within $(document).ready() to invoke the function after DOM loads.</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">$(document).ready(function(){</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">$(&#8216;#qrcodeholder&#8217;).qrcode({</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;"> text : &#8220;http://www.moreonfew.com/generate-qr-code-using-jquery&#8221;,</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;"> render : &#8220;canvas&#8221;, // &#8216;canvas&#8217; or &#8216;table&#8217;. Default value is &#8216;canvas&#8217;</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;"> background : &#8220;#ffffff&#8221;,</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;"> foreground : &#8220;#000000&#8221;,</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;"> width : 150,</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;"> height: 150</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;"> });</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">});</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;"><;/script>;</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">The above code generates the following QR Code:</span></p>
<p style="text-align: justify;"><b>A few jQuery QR plugins that are worth a look </b></p>
<p style="text-align: justify;"><b>#1 jquery.qrcode</b></p>
<p style="text-align: justify;"><span style="font-weight: 400;">This plugin enables you to dynamically add QR codes to your website. Whether you choose to render the code in a Canvas or Divs, the generated code will be in the least possible version required to encode the content. The syntax is pretty much simple, just use: </span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">$(selector).qrcode(options);</span></p>
<p style="text-align: justify;"><b>#2 printQr jQuery Plugin </b></p>
<p style="text-align: justify;"><span style="font-weight: 400;">This plugin adds QR codes for any specified link to the bottom of the page. It is believed that the plugin is mainly used to hide these QR codes from the screen and show them for printing. </span></p>
<p style="text-align: justify;"><b>#3 jQuery-QR-Image-Plugin</b></p>
<p style="text-align: justify;"><span style="font-weight: 400;">As the name implies, the jQuery plugin includes QR images in your site. </span></p>
<p style="text-align: justify;"><b>#4 QR-Code Generator</b></p>
<p style="text-align: justify;"><span style="font-weight: 400;">It is used to create a QR code on any site. Content can be in the form of text or the current URL of the site where it is embedded. </span></p>
<p style="text-align: justify;"><b>#5 jQuery uQR plugin</b></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Written by Marius Stanciu – Sergiu, the plugin allows jQuery developers to embed QR codes into web pages accordingly. </span></p>
<p style="text-align: justify;"><b>#6 Google Chart Tools: Infographics</b></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Did you know that you can create a QR code on the fly with a URL? Yes, the plugin allows you to generate QR codes on Infographics. </span></p>
<p style="text-align: justify;"><b>#7 jquery.MyQRCode.js</b></p>
<p style="text-align: justify;"><span style="font-weight: 400;"> With the help of Google Chart API featuring jQuery, the plugin successfully generates QR code for mobile devices. The by default nature of plugin generates QR code for the URL of the page. One of the obvious benefits of using the plugin is that you can specify the text, encoding, and size of the QR code. </span></p>
<p style="text-align: justify;"><b>#8 jQuery plugin : barcode</b></p>
<p style="text-align: justify;"><span style="font-weight: 400;">In order to use this plugin, simply define a container to host the visual barcode.</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">In addition to passing in the text, </span><a href="https://www.etatvasoft.com/front-end-development/jquery-development/"><span style="font-weight: 400;">jquery developers need to consider</span></a><span style="font-weight: 400;"> these key parameters to customize the QR code appearance:</span></p>
<ul>
<li style="font-weight: 400; text-align: justify;"><span style="font-weight: 400;">Render: canvas, div or image</span></li>
<li style="font-weight: 400; text-align: justify;"><span style="font-weight: 400;">Size: integer in pixels</span></li>
<li style="font-weight: 400; text-align: justify;"><span style="font-weight: 400;">Fill: customize the color using hex #</span></li>
<li style="font-weight: 400; text-align: justify;"><span style="font-weight: 400;">Radius: add corners in pixels</span></li>
<li style="font-weight: 400; text-align: justify;"><span style="font-weight: 400;">Font name: change the font</span></li>
<li style="font-weight: 400; text-align: justify;"><span style="font-weight: 400;">Font color: change the font color </span></li>
</ul>

Get Started With jQuery QR Code Reader Plugins
