Easy Tutorial
❮ Openresty Intro Python Complex Intro ❯

QRCode.js: Generating QR Codes with JavaScript

Category Programming Techniques

What is QRCode.js?

QRCode.js is a JavaScript library for generating QR codes. It primarily works by obtaining DOM tags and then drawing them with the HTML5 Canvas, without relying on any other libraries.


Basic Usage

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://www.tutorialpro.org");  // Set the link to be encoded in the QR code
</script>

Or use some optional parameters:

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

We can also use the following methods:

qrcode.clear(); // Clear the code
qrcode.makeCode("http://www.w3cschool.cc"); // Generate another QR code

Browser Support

The browsers that support this library include: IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, etc.


Example Code

HTML Code

<input id="text" type="text" value="http://www.tutorialpro.org" /><br />
<div id="qrcode"></div>

CSS Code

#qrcode {
width:160px;
  height:160px;
  margin-top:15px;
}

JavaScript Code

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

Try it out »


Resource Download

Qrcode library and example download:qrcodejs-04f46c6.zip

Github address:https://github.com/davidshimjs/qrcodejs

#

-

**Spicy Strips Association President

* ltx**@qq.com

** Reference address

This library will produce an error when the text length is around 215 characters, and the original Github library has not been fixed. Here is a fixed version: https://github.com/KeeeX/qrcodejs

**Spicy Strips Association President

* ltx**@qq.com

** Reference address

** Click to Share Notes

Cancel

-

-

-

❮ Openresty Intro Python Complex Intro ❯