使用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进阶教程(第四课第一部分)
Apr 05 Javascript
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
vue.js语法及常用指令
Oct 29 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 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
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
php对称加密算法示例
2014/05/07 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
详解ES6中的let命令
2020/04/05 Javascript
React组件生命周期详解
2017/07/03 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
详解Python中find()方法的使用
2015/05/18 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
在家更换处方镜片:Lensabl
2019/05/01 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
工程质量月活动方案
2014/02/19 职场文书
党校学习自我鉴定
2014/02/24 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
特教教师先进事迹
2014/05/21 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
小学教师教学反思
2016/02/24 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏