使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo


Posted in Javascript onSeptember 01, 2016

0 Jquery.Qrcode简介

Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中。Jquery.Qrcode主要包括以下参数设置:

•render 定义二维码的渲染方式,有table和canvas两种渲染方式

•width 定义二维码的宽度

•height 定义二维码的高度

•text 定义二维码内容

•typeNumber 二维码的计算模式 一般默认为-1

•correctLevel 二维码的纠错级别

•background 定义二维码的背景颜色

•foreground 定义二维码的前景色

1 Jquery.Qrcode基本使用

1.0 添加相关引用

Jquery.Qrcode仅仅依赖于Jquery,所以我们只需要添加Jquery及Jquery.Qrcode的引用即可。

<script src="~/Content/js/jquery-2.1.4.min.js"></script>
<script src="~/Content/js/jquery.qrcode.min.js"></script>

1.1 添加渲染区域元素

Jquery.Qrcode使用div元素作为渲染的目标区域,在页面上添加一个div标签。

<div id="qrCodeDiv">
</div>

1.2 二维码生成

$("#qrCodeDiv").qrcode({
render: "canvas", // 渲染方式有table方式(IE兼容)和canvas方式
width: 260, //宽度
height: 260, //高度
text: "www.baidu.com", //内容
typeNumber: -1,//计算模式
correctLevel: 2,//二维码纠错级别
background: "#ffffff",//背景颜色
foreground: "#000000" //二维码颜色
});

二维码生成如下

使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

2 Jquery.Qrcode对中文字符的支持

默认的Jquery.Qrcode是不支持中文编码的,上面我们如果将text的内容设置为中文字符串,生成二维码并扫描后会发现结果是乱码。这是因为jquery.qrcode采用 charCodeAt() 方式进行编码转换,默认采用UTF-8方式编码,而针对中文一般情况下是采用UTF-16编码实现,这样就会导致乱码的出现,解决方案就是在二维码编码前,将二维码的内容字符串转换成UTF-8格式,js转换方法如下。

function utf16to8(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;
};

生成二维码时,将转码后的结果作为text的值即可

$("#qrCodeDiv").qrcode({
render: "canvas", // 渲染方式有table方式(IE兼容)和canvas方式
width: 260, //宽度
height: 260, //高度
text: utf16to8("汉字内容的二维码"), //内容
typeNumber: -1,//计算模式
correctLevel: 2,//二维码纠错级别
background: "#ffffff",//背景颜色
foreground: "#000000" //二维码颜色
});

3 Jquery.Qrcode添加自定义Logo图片

给二维码添加一个自定义的logo,会让你的二维码看上去更专业,默认的Jquery.Qrcode是不支持添加自定义Logo的,这里比较简单的实现方案就是,针对每个二维码添加一个img标签,让img在二维码区域相对居中显示即可。

<img id="qrCodeIco" src="~/images/logo.png" style="position: absolute;width: 30px; height: 30px;" />

控制img标签的位置

var margin = ($("#qrCodeDiv").height() - $("#qrCodeIco").height()) / 2; //控制Logo图标的位置
$("#qrCodeIco").css("margin", margin);

最终结果如下

使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

以上所述是小编给大家介绍的使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中匿名函数的N种写法
Sep 08 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 #Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 #Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 #Javascript
javaScript如何跳出多重循环break、continue
Sep 01 #Javascript
AngularJs bootstrap详解及示例代码
Sep 01 #Javascript
JavaScript数据类型学习笔记分享
Sep 01 #Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 #Javascript
You might like
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
php去掉文件前几行的方法
2015/07/29 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
Javascript Math对象
2009/08/13 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python列表list保留顺序去重的实例
2018/12/14 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
大学生如何写自荐信
2014/01/08 职场文书
直接有效的自我评价
2014/01/11 职场文书
大学生军训广播稿
2014/01/24 职场文书
小学数学教学反思
2014/02/02 职场文书
上课玩手机检讨书
2014/02/08 职场文书
社会实践活动总结范文
2014/07/03 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP