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

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

更新: 2018-10-14

阅读:2095

开源:GitHub

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>

可以发现代码中多了几个参数:ecLevelmodelabel ,主要参数 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