js生成二维码的jquery组件–qrcode
2016-04-14 17:03
731 查看
js生成二维码的jquery组件–qrcode
2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码。
qrcode其实是通过计算,然后使用jquery实现图形渲染和画图。支持canvas和table两种方式生成我们所需的二维码。
一、具体用法
1、所需资源
qrcode是jquery组件,需要至少两个js, 就是 jquery 和 jquery.qrcode。您可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码。1 2 3 4 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script> |
2、所需的html
在页面上,需要显示二维码的地方加入一个空元素(此处用div)1 2 3 | <div id="qrcode"></div> |
3、调用js
在需要生成二维码的时候,调用一下语句直接生成。1 2 3 | $("#qrcode").qcrode("http://ifxoxo.com");//需要生成的页面 |
4、效果
!二、详细参数
参数 | 默认值 | 说明 |
---|---|---|
render | canvas | 渲染方式,支持canvas和table |
width | 无 | 宽度 |
height | 无 | 高度 |
text | 无 | 需要生成的url |
1 2 3 4 5 6 7 8 | $("#qrcode").qcrode({ render: "table", width: 200, height: 200, text: "http://ifoxox.com" }); |
三、解决url中有中文方法
我们试验的时候发现不能识别中文内容的二维码,通过查找多方资料了解到,jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码,如果有中文内容,在生成二维码前就要把字符串转换成UTF-8,然后再生成二维码。您可以通过以下函数来转换中文字符串:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | function toUtf8(str) { var out, i, len, c; out = ""; len = str.length; for(i = 0; i < len; i++) { c = str.charCodeAt(i); if ((c >= 0x0001) && (c <= 0x007F)) { out += str.charAt(i); } else if (c > 0x07FF) { out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } else { out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } } return out; } |
Related Posts
jquery ui(六)拖动排序 sortablejquery插件(一):JQCloud
jquery-datepicker添加自定义button
jquery插件(三):Colorbox–内容播放插件
jquery ui (一)简介__ifxoxo.com
jquery ui(三)弹出窗口 dialog
相关文章推荐
- 基于RequireJS和JQuery的模块化编程――常见问题全面解析
- jQuery Ajax()常用方法和参数的使用样例
- jQuery学习进阶篇
- jquery的ajax同步和异步
- jQuery DatePicker
- jquery ajax请求数据超时设置
- 如何写一个jQuery插件
- Jquery实现$.fn.extend和$.extend函数
- 详解Jquery实现ready和bind事件
- jquery each
- 十条jQuery代码片段助力Web开发效率提升
- jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
- 基于jQuery实现音乐播放试听列表
- JQuery EasyUI Datagrid 的 tooltip 使用
- JavaScirpt之JQuery库入门篇
- jquery 导出excel tableExport
- jquery 生成 html 绑定
- jQuery的extend详解
- jquery 延迟执行实例介绍
- jquery中attr()与prop()函数用法实例详解(附用法区别)