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

现在前端二维码的生成器有很多，像草料二维码生成器，联图二维码生成器等这些在线生成器都是生成功能比较强大，生成的二维码比较精美的在线生成器，看着比较高大上，那么他们的实现原理？就是通过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

效果图：

其他

[我的博客，欢迎交流！](http://rattenking.gitee.io/stone/index.html)

[我的CSDN博客，欢迎交流！](https://blog.csdn.net/m0_38082783)

[微信小程序专栏](https://blog.csdn.net/column/details/18335.html)

[前端笔记专栏](https://blog.csdn.net/column/details/18321.html)

[微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)

[微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)

[微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)

[微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)

[前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)

[游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)