二维码相关知识
1、关于前景色和背景色:
二维码的背景色的设置一定要比前景色和定位点的颜色要浅
毕业设计要求完成:
能够方便地根据输入信息自动生成二维码图片。
可以根据需要自由设置二维码的前景色、背景色;
可以随意调节二维码分布的密集程度;
可以设置二维码外围四周静区的大小。
二维码中间的标签可以是文字,其颜色、字体均可设置;也可以是图片,图片大小可以设置。
二维码
Java方面二维码相关工具大概有qrcode和zxing,
但是一般来说应用二维码比较多的是生成,扫描用的比较少,
而qrcode和zxing是两者都有,方法比较多。
(ZXing是一个开放源码的,用Java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口。Zxing可以实现使用手机的内置的摄像头完成条形码的扫描及解码。)
一、使用jquery-qrcode生成二维码
说明:jquery的一个插件,jquery-qrcode可以利用js生成二维码,效果不错。这里做一下封装,让使用起来更简单。
先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取),
qrcode.js 是实现二维码数据计算的核心类,
jquery.qrcode.js 是把它用jquery方式封装起来的,用它来实现图形渲染,其实就是画图(支持canvas和table两种方式)
1.支持的功能主要有:
text : "https://github.com/jeromeetienne/jquery-qrcode" //设置二维码内容
render : "canvas",//设置渲染方式
width : 256, //设置宽度
height : 256, //设置高度
typeNumber : -1, //计算模式
correctLevel : QRErrorCorrectLevel.H,//纠错等级
background : "#ffffff",//背景颜色
foreground : "#000000" //前景颜色
jQuery('#output').qrcode({width:200,height:200,correctLevel:0,text:content});
使用canvas方式渲染性能还是非常不错的,但是如果用table方式,性能不太理想,特别是IE9以下的浏览器,所以需要自行优化一下渲染table的方式,这里就不细述了。
2.
<!-- jquery-1.11.1 -->
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
<!-- jquery-qrcode -->
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<!-- 中文转码 -->
<script type="text/javascript">
function qcodetochar(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>
封装:封装是为了更好的使用,可以直接传str或者一个配置对象,具体如下
/**
* 生成二维码
* text:待生成文字
* type:中文还是英文,cn为中文
* render:展示方式,table为表格方式
* width:宽度
* height:高度
* 注:需要引入<@jsfile 'qrcode'/>
*/
$.fn.qcode = function(options){
if(options){
var opt = {};
if(typeof options == 'string'){
opt.text = options;
}else{
if(options.text) opt.text = options.text;
if(options.type && options.type == 'ch') opt.text = qcodetochar(opt.text);
if(options.render && options.render == 'table') opt.render = options.render;
if(options.width) opt.width = options.width;
if(options.height) opt.height = options.height;
}
$(this).qrcode(opt);
}
};
使用
1.页面需要一个div,并给一个id
2.$('#test').qcode({});
3. jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery 插件,它使用非常简单,生成的 QRcode 无需下载图片,并且不依赖第三方服务,比如最近 Google 服务在国内访问不稳就造成我好几个网站的 QRcode 不能使用,并且压缩之后大小小于 4K。
<1. 加载 jQuery 和 jquery.qrcode.js:
<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<2. 创建一个用于包含 QRcode 图片的 DOM 元素,比如 div:
<div id="qrcode"></div>
<3. 然后通过下面代码生成 QRcode:
jQuery('#qrcode').qrcode("http://blog.wpjam.com");
<4. 默认生成的二维码大小是 256×256,当然可以自定义大小:
jQuery('#qrcode').qrcode({width: 64,height: 64,text: "http://blog.wpjam.com"})
jquery.qrcode.js演示
1. Canvas 方式渲染
![](https://images2015.cnblogs.com/blog/1021271/201705/1021271-20170510194928004-1351150247.png)
2. Table 方式渲染,并加了 1px 描边。
二、JS生成中文二维码
其实上面的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;
}
相关资料: http://www.cnblogs.com/hq123/p/6771329.html