使用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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
jquery高效反选具体实现
May 05 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
javascript 实现map集合
Apr 03 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
d3.js实现图形缩放平移
Dec 19 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
thinkphp模板用法和内容输出实例
2014/11/28 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
PHP学习笔记之session
2018/05/06 PHP
JavaScript基础知识之数据类型
2012/08/06 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
Python学习小技巧总结
2018/06/10 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
Python 如何测试文件是否存在
2020/07/31 Python
python使用建议技巧分享(三)
2020/08/18 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
shell的种类有哪些
2015/04/15 面试题
临床医师专业个人自我评价
2014/01/08 职场文书
表彰先进的通报
2014/01/31 职场文书
五一劳动节活动记录
2014/03/23 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
五年级下册复习计划
2015/01/19 职场文书
离职信范文
2015/06/23 职场文书
英文投诉信格式
2015/07/03 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
Java数组与堆栈相关知识总结
2021/06/29 Java/Android