使用jquery组件qrcode生成二维码及应用指南


Posted in Javascript onFebruary 22, 2015

有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码。

qrcode其实是通过计算,然后使用jquery实现图形渲染和画图。支持canvas和table两种方式生成我们所需的二维码。

具体用法
qrcode是jquery组件,需要至少两个js, 就是 jquery 和 jquery.qrcode。可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码。

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

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

在页面上,需要显示二维码的地方加入一个空元素(此处用div)

<div id="qrcode"></div>

在需要生成二维码的时候,调用一下语句直接生成。

$("#qrcode").qcrode("https://3water.com");//需要生成的页面

详细参数

参数 默认值 说明
render canvas 渲染方式,支持canvas和table
width 无 宽度
height 无 高度
text 无 需要生成的url
 
如:

$("#qrcode").qcrode({

    render: "table",

    width: 200,

    height: 200,

    text: "https://3water.com"

});

解决url中有中文方法

我们试验的时候发现不能识别中文内容的二维码,通过查找多方资料了解到,jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码,如果有中文内容,在生成二维码前就要把字符串转换成UTF-8,然后再生成二维码。您可以通过以下函数来转换中文字符串:

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;    

}

下载二维码

用前端画出来的二维码,不是一个canvas就是一个table,如何下载呢?我们只需要将canvas的内容画到image上,下载下来即可。

function download(canvasElem, filename, imageType) {

    var event, saveLink, imageData, defalutImageType;

    defalutImageType = 'png';//定义默认图片类型

    imageData = canvasElem.toDataURL(imageType || defalutImageType);//将canvas元素转化为image data

    saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');

    saveLink.href = imageData;

    saveLink.download = filename;

    event = document.createEvent('MouseEvents');

    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

    saveLink.dispatchEvent(event);

};

在angular中的简单封装

在angular中使用,可以封装成directive。不过要确保已经引入了之前的两个js文件。

var appModule = angular.module('app', []);

appModule.directive('qrcode', function() {

    return {

        restrict: "A",

        scope: {

          text    : '=',

          options : '='

        },

        link: function(scope, elem, attrs) {

          var $elem, options;

          $elem = $(elem);

          options = { //获取元素的宽度和高度

            width: $elem.width(),

            height: $elem.height()

          };

          angular.extend(options, scope.options);

          scope.$watch('text', function(newText) {

            if (newText) {

              options.text = newText;

              $(elem).qrcode(options);//重新生成二维码

            }

          });

        };

    };

});

下载的方法在angular中可以封装成一个service使用。

小伙伴们会使用qrcode生成二维码了吧,确实很好用,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript的目的分析
Jan 05 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 #Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 #Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 #Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 #Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 #Javascript
jQuery常用数据处理方法小结
Feb 20 #Javascript
jQuery数据缓存用法分析
Feb 20 #Javascript
You might like
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
python网络编程之数据传输UDP实例分析
2015/05/20 Python
python MySQLdb使用教程详解
2018/03/20 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
解决python 找不到module的问题
2020/02/12 Python
如何完美的建立一个python项目
2020/10/09 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
pip install命令安装扩展库整理
2021/03/02 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
学生鉴定评语大全
2014/05/05 职场文书
房屋出售授权委托书
2014/10/12 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
联村联户简报
2015/07/21 职场文书
电工实训心得体会
2016/01/14 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
python​格式化字符串
2022/04/20 Python