jquery.qrcode.js二维码生成插件

jquery.qrcode.js是一个能够在浏览器端生成二维码的jquery插件，生成带文字和LOGO的二维码图片，该插件甚至支持旧的浏览器。下面来看看该怎么实现吧。顺便推荐一个二维码图片识别在线工具

插件安装

将jquery.qrcode.min.js和 jQuery 添加到您的网页中

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

创建二维码容器：

<div class="qrcode"></div>

简单例子

<script>
$(function () {
	$('.qrcode').qrcode({
		size: 320,
		background: '#fff',
		text: 'http://www.hoohtml.com/'
	});
});
</script>

生成带文字的二维码

<script>
$(function () {
	$('.qrcode').qrcode({
		size: 320,
		background: '#fff',
		ecLevel: 'Q', 
		mode: 2,
		label: '优码网',
		fontcolor: '#eb4f38', //lable中字体颜色
		text: 'http://www.hoohtml.com/'
	});
});
</script>

可以发现代码中多了几个参数：ecLevel、mode、label ，主要参数 mode=2（文字排版显示为label box）；label=要显示的文字；ecLevel=Q ，该参数默认为L，如果有显示文字最好调整二维码错误修正级别，不然有可能无法识别

生成带LOGO的二维码

<img id="img-buffer" src="dummy.png" alt="LOGO图片" />
<script>
$(function () {
	$('.qrcode').qrcode({
		size: 320,
		background: '#fff',
		ecLevel: 'H',
		text: 'http://www.hoohtml.com/',
		mode:4,
		image: $('#img-buffer')[0]
	});
});
</script>

参数mode改成 4(image box)，再加一个image参数 就可以生成带LOGO的二维码了。

参数说明

• render：渲染方法；'canvas', 'image' or 'div' ；默认：canvas
• minVersion：版本范围 1...40
• maxVersion：版本范围 1...40
• ecLevel：二维码错误修正级别；可选：'L', 'M', 'Q' or 'H' ；默认：L
• left：二维码在画布中的LEFT偏移
• top：二维码在画布中的TOP偏移
• size：二维码的大小
• fill：二维码的颜色
• background：画布的背景颜色
• text：二维码内容，把text内容转成二维码
• radius：添加圆角边框
• quiet：参数说明
• mode：输出二维码的类型，可选 0 = normal,1 = label strip,2 = label box,3 = image strip,4 = image box
• mSize：调整文字或图片大小
• mPosX：调整文字或图片的位置
• mPosY：调整文字或图片的位置
• label：需要显示的文字
• fontname：文字的字体
• fontcolor：文字颜色
• image： 图片对象，默认为 null