您的位置:首页 > Web前端 > JavaScript

用QRCode.js制作二维码的生成器(qrcode.makeCode方法生成二维码)

2017-09-19 14:09 585 查看
现在前端二维码的生成器有很多,像草料二维码生成器,联图二维码生成器等这些在线生成器都是生成功能比较强大,生成的二维码比较精美的在线生成器,看着比较高大上,那么他们的实现原理?就是通过QRCode.js插件的qrcode.makeCode方法来生成的二维码。

下载QRCode.js

1,引入QRCode.js

<script src="QRCode.js" type="text/javascript" charset="utf-8"></script>


2,利用该插件生成二维码

(function(){
let elText = document.getElementById("text");
let qrcode = new QRCode(document.getElementById("qrcode"), {
width : 120,
height : 120
});
function makeCode(){
if (!elText.value) {
elText.onfocus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
elText.addEventListener('blur',function(){
makeCode();
},false);
elText.addEventListener('keydown',function(e){
if(e.keyCode === 13)makeCode();
},false);
}())
注意:

(1),new QRCode({})此处是对生成二维码的初始化,可以设置生成二维码的宽高,颜色,背景等属性

(2),获取输入框的文本,通过qrcode.makeCode方法制作二维码

(3),对文本绑定失去焦点事件和键盘的enter键事件

效果demo:

https://rattenking.github.io/demo/16/

下载demo:

http://download.csdn.net/download/m0_38082783/9985117

效果图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: