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

H5案例分享：jquery.qrcode.js生成简易二维码

2017-05-26 01:54 826 查看

近期做项目需要生成二维码，并且解码获取信息，jquery.qrcode.js生成二维码比较的方便，写个教程分享给大家。欢迎大家测试留言，我会改进代码。

现在二维码越来越流行啦，支付扫二维码，关注扫二维码，抽奖扫二维码......，总之，二维码无处不在，那怎么制作一个二维码呢？我们今天就此问题一起来讨论一下

一、什么是二维码

首先我们来了解一下，什么是二维码？百度百科上是这样解释的：二维条码/二维码（2-dimensional bar code）是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理：它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。

二、具体实现

那怎么来实现制作出一个二维码呢？有很多小伙伴是在服务器端生成二维码，作为前端控，小五今天就和大家磨叨一下怎么在前端生成二维码。其实小五还是走了捷径，采用了一个二维码插件jquery-qrcode，可以从https://github.com/jeromeetienne/jquery-qrcode 获取，这是一个免费开源的插件。qrcode.js 是实现二维码数据计算的核心类，jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和table两种方式）

1、支持的功能主要有：

text     : " http://www.h5-share.com/ "  //设置二维码内容
render   : "canvas",//设置渲染方式 （有两种方式 table和canvas，默认是canvas）
width       : 256,     //设置宽度
height      : 256,     //设置高度
typeNumber  : -1,      //计算模式
correctLevel    : 0,//纠错等级
background      : "#ffffff",//背景颜色
foreground      : "#000000" //前景颜色

2、使用方式非常简单

需要引入jQuery 和 jquery.qrcode.js

①$('#qr_container').qrcode({render:"table",height:180,width:180,correctLevel:0,text:$('#qr_text').val()});

②$('#qr_container').qrcode({render:"canvas",height:180,width:180,correctLevel:0,text:$('#qr_text').val()});

当你分别执行了上面的例子，就可以看到，二维码使用canvas画出来，在网页上输出一个canvas节点。但是用到table的话，我们会发现二维码实际是使用table表格把每一个二维码的点画出来，这就导致网页上的Dom元素会特别多。

选择canvas，ie8一下的浏览器就没办法支持。选择table吧，一切看起来都很美好。但在实际使用的过程中，当二维码的内容较多时，二维码的尺寸较小时(比如120px * 120 px)，用table来渲染，会发现生成的二维码很难识别。

作为移动端开发者，现代的智能机基本上都支持canvas，那我们就用canvas吧，但是新的问题又来了，就是jquery.qrcode.js默认不支持中文。

这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。

解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：

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;
}

现在中文生成二维码解决了，但是！！！你生成的二维码在canvas里，怎么保存在本地呢？很简单，把canvas里的信息转换成img图片就行了。

// 从canvas提取图片image
function convertCanvasToImage(canvas){
//新Image对象,可以理解为DOM;
var image = new Image();
//canvas.toDataURL返回的是一串Base64编码的URL
image.src = canvas.toDataURL("image/png");
return image;
}

三、完整示例：

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生成二维码</title>
//引入库文件
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.qrcode.min.js"></script>
</head>
<body>
<h1>jquery.qrcode.js生成简易二维码</h1>
<div>
b66c
;
<label for="qr_text">URL:</label>
<input id="qr_text" type="text" value="http://www.h5-share.com/" style="width:200px;" />
<button id="qr_btn" value="button">button</button> <br />
</div>
<div id="qr_container" style="margin:auto; position:relative;"></div>
<div id="imgDiv"></div>
<script>
$(document).ready(function(){
// 点击生成二维码
$('#qr_btn').click(function(){
/*如果已生成过二维码，则删除二维码img图片和canvas，重新生成；反之，则直接生成二维码*/
if($('#imgDiv:has(img)').length!=0){
$('#imgDiv img').remove();
$('canvas').remove();
createQr();
}else{
createQr();
}
});
// 生成二维码
function createQr(){
document.createElement('canvas').getContext('2d');
var valText = $('#qr_text').val();

// 采用正则表达式判断输入的内容是否是中文
var reg=/^[\u0391-\uFFE5]+$/;
if(valText!=""&&!reg.test(valText)){
// 如果不是中文，直接将输入的内容转换成二维码
$('#qr_container').qrcode({render:"canvas",height:180, width:180,correctLevel:0,text:valText});
}else{
// 如果是中文，直接将输入的内容字符串转换成UTF-8，然后再转换成二维码
$('#qr_container').qrcode({render:"canvas",height:180, width:180,correctLevel:0,text:utf16to8(valText)});
}

//获取网页中的canvas对象
var mycanvas1=document.getElementsByTagName('canvas')[0];

//将转换后的img标签插入到html中
var img = convertCanvasToImage(mycanvas1);
$('#imgDiv').append(img);//imgDiv表示你要插入的容器id
}

// 字符编码
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;
}

//从canvas中提取图片image
function convertCanvasToImage(canvas) {
//新Image对象，可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL
// 指定格式PNG
image.src = canvas.toDataURL("image/png");
return image;
}
});

</script>
</body>
</html>

参考教程：http://www.h5-share.com/articles/201701/createqr.html
想体验更多二维码生成案例教程，赶快拿起手机扫描下面的微信二维码吧。关注回复教程，领取前端学习视频。

好了，写到这里，也该睡觉去了，本人也会在近期将js生成二维码，解码源码进行开源，大家可以关注我的github哦，求粉求粉求粉，重要的说三遍！！！
https://github.com/laizige
点击链接关注我吧。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 二维码解码二维码生成 js生成二维码 javascript h5开发

相关文章推荐

新的分享

章节导航

H5案例分享：jquery.qrcode.js生成简易二维码

好了，写到这里，也该睡觉去了，本人也会在近期将js生成二维码，解码源码进行开源，大家可以关注我的github哦，求粉求粉求粉，重要的说三遍！！！https://github.com/laizige 点击链接关注我吧。

好了，写到这里，也该睡觉去了，本人也会在近期将js生成二维码，解码源码进行开源，大家可以关注我的github哦，求粉求粉求粉，重要的说三遍！！！
https://github.com/laizige
点击链接关注我吧。