使用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对象之JS入门之Array对象操作小结
Jan 09 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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
在字符串中把网址改成超级链接
2006/10/09 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
js类的静态属性和实例属性的理解
2009/10/01 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
[01:13]这,就是刀塔
2014/07/16 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python的Flask框架中web表单的教程
2015/04/20 Python
Python中设置变量访问权限的方法
2015/04/27 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
公司捐款倡议书
2014/05/14 职场文书
优秀班组长事迹
2014/05/31 职场文书
工程索赔意向书
2014/08/30 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
九年级化学教学反思
2016/02/22 职场文书