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

二维码的概述

二维码又称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>
<html>
<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插件生成

猜你喜欢