最新消息:

第40款插件2:jquery.qrcode.js生成二维条形码(经修改支持中文)

图片幻灯插件 杨红伟 6375浏览 0评论

首先感谢 suflow 的这篇博客 http://suflow.iteye.com/blog/1687396

描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码。此插件是能够独立使用的,体积也比较小,使用gzip压缩后才不到4kb。因为它是直接在客户端生成的条码, 所以不会有图片下载的过程,能够实现快速生成。它是基于一个多语言的类库封装的,也不依赖于其他额外的服务。

图片展示:

1

兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:http://jeromeetienne.github.com/jquery-qrcode/
JS 下载:http://www.ijquery.cn/js/qrcode/jquery.qrcode-zh.jshttp://www.ijquery.cn/js/qrcode/qrcode.jshttp://www.ijquery.cn/js/qrcode/utf.js
预览: http://www.ijquery.cn/demo/qrcode/index-zh.html
打包下载:http://www.ijquery.cn/demo/qrcode/qrcode.zip

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/utf.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/qrcode/jquery.qrcode-zh.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/qrcode/qrcode.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#qrcodeTable").qrcode({
render    : "table",
text    : "百度",
width:"200",
height:"200"
});
});
</script>

[/js]

HTML代码:

[html]

<div id="qrcodeTable"></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" //前景颜色

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址