您的位置：首页 > Web前端 > JQuery

菜鸟先飞之二维码jquery-qrcode插件生成

2017-12-21 15:28 295 查看
二维码的概述

二维码又称QR Code，QR全称Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。

二维码的生成工具

java生成二维码常用的有jquery的jquery-qrcode插件、qrcode和zxing，单单对于生成二维码来说，还是jquery-qrcode插件生成来得方便。一个静态的页面就可以搞定。废话不多说一个小demo就知道生成二维码原来这么简单。

准备工作

首先去GitHub上下载所需要的js文件，找到发行版本下载。

地址是：https://github.com/jeromeetienne/jquery-qrcode





下载完之后我们需要用到的就是jquery.qrcode.min.js，这个插件是依赖于jquery的，所以小伙伴们需要自己准备jquery.min.代码js

上代码

首先引入js文件，这里要注意的是jquery-qrcode依赖jquery,所以jquery要在前面。

<!-- js文件的引入 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>


然后在body添加一个div作为渲染区域

生成默认格式的二维码：<br/>
<!-- 定义的渲染区域 -->
<div id="qrcode"></div>


最后通过下面的代码生成想要的二维码

jQuery('#qrcode').qrcode("http://blog.csdn.net/happy_cloudlife/");


想要改变它的大小、二维码颜色、背景色怎么办？

jQuery("#qrcode1").qrcode({
render: "canvas", // 渲染方式有table方式和canvas方式
width: 256,   //默认宽度
height: 256, //默认高度
text: "http://blog.csdn.net/happy_cloudlife/", //二维码内容
typeNumber: -1,   //计算模式一般默认为-1
correctLevel: 2, //二维码纠错级别
background: "#ffffff",  //背景颜色
foreground: "#800080"  //二维码颜色
});


默认是不支持中文的怎么办？没事这有解决方案，在给内容的时候进行一下转码。转换的代码：

jQuery("#qrcode2").qrcode({
render: "canvas", // 渲染方式有table方式和canvas方式
width: 256,   //默认宽度
height: 256, //默认高度
text: utf16to8("真棒！"), //二维码内容
typeNumber: -1,   //计算模式一般默认为-1
correctLevel: 2, //二维码纠错级别
background: "#ffffff",  //背景颜色
foreground: "#1E90FF"  //二维码颜色
});
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;
}

下面是完整的页面代码：

<!DOCTYPE html>
<htm
b37f
l>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- js文件的引入 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
</head>
<body>
生成默认格式的二维码：<br/>
<!-- 定义的渲染区域 -->
<div id="qrcode"></div>
生成自定义格式的二维码：<br/>
<!-- 定义的渲染区域 -->
<div id="qrcode1"></div>
生成自定义格式内容包含中文的二维码：<br/>
<!-- 定义的渲染区域 -->
<div id="qrcode2"></div>
<!-- 生成自己想要的二维码 -->
<script type="text/javascript">
jQuery('#qrcode').qrcode("http://blog.csdn.net/happy_cloudlife/");

jQuery("#qrcode1").qrcode({
render: "canvas", // 渲染方式有table方式和canvas方式
width: 256,   //默认宽度
height: 256, //默认高度
text: "http://blog.csdn.net/happy_cloudlife/", //二维码内容
typeNumber: -1,   //计算模式一般默认为-1
correctLevel: 2, //二维码纠错级别
background: "#ffffff",  //背景颜色
foreground: "#800080"  //二维码颜色
});

jQuery("#qrcode2").qrcode({
render: "canvas", // 渲染方式有table方式和canvas方式
width: 256,   //默认宽度
height: 256, //默认高度
text: utf16to8("真棒！"), //二维码内容
typeNumber: -1,   //计算模式一般默认为-1
correctLevel: 2, //二维码纠错级别
background: "#ffffff",  //背景颜色
foreground: "#1E90FF"  //二维码颜色
});
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;
}
</script>
</body>
</html>
效果如下图：



总结

利用js生成的二维码很是方便，秒实现，但是问题又来了，怎么解析二维码，我会在之后的文章中说明。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery 二维码 qrcode
相关文章推荐
新的分享
章节导航