支持中文的在下一讲:《第40款插件2:jquery.qrcode.js生成二维条形码(经修改支持中文)》
描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码。此插件是能够独立使用的,体积也比较小,使用gzip压缩后才不到4kb。因为它是直接在客户端生成的条码, 所以不会有图片下载的过程,能够实现快速生成。它是基于一个多语言的类库封装的,也不依赖于其他额外的服务。
图片展示:
兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:http://jeromeetienne.github.com/jquery-qrcode/
JS下载:http://www.ijquery.cn/js/qrcode/jquery.qrcode.js 和 http://www.ijquery.cn/js/qrcode/qrcode.js
预览: http://www.ijquery.cn/study/demo/qrcode
打包下载:http://www.ijquery.cn/study/demo/qrcode/qrcode.zip
可惜的是ie6-8只支持table渲染方式。
JS引用代码:qrcode注意需要引用两个JS
[js]
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/qrcode/jquery.qrcode.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/qrcode/qrcode.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#qrcodeCanvas").qrcode({
render : "canvas",
text : "http://www.baidu.com",
width:"200",
height:"200"
});
});
</script>
[/js]
HTML代码:
[html]
<div id="qrcodeCanvas"></div>
[/html]
参数说明:
render : "canvas", //设置渲染方式,有table和canvas,使用canvas方式渲染性能还是非常不错的,但是如果用table方式,性能不太理想,特别是IE9以下的浏览器
width : 256, //设置宽度
height : 256, //设置高度
text : "http://www.baidu.com", //设置二维码内容
typeNumber : -1, //计算模式
correctLevel : QRErrorCorrectLevel.H,//纠错等级
background : "#ffffff",//背景颜色
foreground : "#000000" //前景颜色