使用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 相关文章推荐
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
基于JS实现web端录音与播放功能
Apr 17 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
如何在PHP中生成随机数
2020/06/04 PHP
用jscript启动sqlserver
2007/06/21 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
使用python实现knn算法
2017/12/20 Python
Python中static相关知识小结
2018/01/02 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
python装饰器代码深入讲解
2021/03/01 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
一个精品风格的世界:Atterley
2019/05/01 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
《云雀的心愿》教学反思
2014/02/25 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
个人违纪检讨书
2014/09/15 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android