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();
}
});
Resource Download
Qrcode library and example download:qrcodejs-04f46c6.zip
Github address:https://github.com/davidshimjs/qrcodejs
#
-
**Spicy Strips Association President
* ltx**@qq.com
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
** Click to Share Notes
-
-
-