QRCode.js a javascript library to generate two-dimensional code

Foreword

Recently met a demand in development: Convert returned by the backend link into a code, then how to achieve it? We can solve this problem using QRCode.js

What is QRCode.js?

QRCode.js is a two-dimensional code used to generate the JavaScript library. Mainly through the acquisition of DOM tab, then formed by drawing HTML5 Canvas, it does not depend on any library.

Basic Usage

<div ID = " qrcode " > </ div> 
<Script type = " text / JavaScript " >
　　new new QRCode (document.getElementById ( " qrcode " ), " http://www.runoob.com " );   // Set to generate two-dimensional code link 
</ script>

Or use some optional parameters:

var qrcode = new QRCode("test", {
    text: "http://www.runoob.com",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

Similarly, we can use the following methods:

qrcode.clear (); // Clear the code 
qrcode.makeCode ( " http://www.w3cschool.cc " ); // generates another two-dimensional code

Browser support

The library supports browsers: IE6 ~ 10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, and so on.

The example code

Example one:

HTML 代码
<input id="text" type="text" value="http://www.runoob.com" /><br />
<div id="qrcode"></div>


CSS 代码
#qrcode {
　width:160px;
  height:160px;
  margin-top:15px;
}  
 
JavaScript 代码
var qrcode = new QRCode("qrcode");

function makeCode () {      
    var elText = document.getElementById("text");
    
    if (!elText.value) {
        alert("Input a text");
        elText.focus();
        return;
    }
    
    qrcode.makeCode(elText.value);
}

makeCode();

$("#text").
on("blur", function () {
    makeCode();
}).
on("keydown", function (e) {
    if (e.keyCode == 13) {
        makeCode();
    }
});

Example 2:

var qrcodeOne = new QRCode(document.getElementById("qrcodeOne"), {
    width: 100,
    height: 100,
    colorDark : "#000000",
    colorLight : "#ffffff"
 });
                       
qrcodeTwo.makeCode(res.productUrl);

note

Of course, we will certainly be introduced qrcode.js

<script type="text/javascript" src="qrcode.js"></script>

 

Reference: GitHub