[TOC]
二维码基本原理
二维条码是指在一维条码的基础上扩展出另一维具有可读性的条码,使用黑白矩形图案表示二进制数据,被设备扫描后可获取其中所包含的信息。一维条码的宽度记载着数据,而其长度没有记载数据。二维条码的长度、宽度均记载着数据。二维条码有一维条码没有的“定位点”和“容错机制”。容错机制在即使没有辨识到全部的条码、或是说条码有污损时,也可以正确地还原条码上的信息。二维条码的种类很多,不同的机构开发出的二维条码具有不同的结构以及编写、读取方法。
堆叠式/行排式二维条码,如,Code 16K、Code 49、PDF417等。
矩阵式二维码,最流行莫过于QR CODE,二维码的名称是相对与一维码来说的,比如以前的条形码就是一个“一维码”。它的优点有:二维码存储的数据量更大;可以包含数字、字符,及中文文本等混合内容;有一定的容错性(在部分损坏以后可以正常读取);空间利用率高等。
二维码扫描器是根据条码的颜色反差 (Color Contrast) 而识别,因此以黑白颜色配搭效果最好。二维码的反差色不明显会出现扫描不出来的情况。白色的二维码,可以换成黑色的底色。二维码扫描器是根据条码的颜色反差 (Color Contrast) 而识别,所以以黑白颜色配搭的效果是最好的。
颜色使用须知如下:
- 条纹使用深色,空白位用浅色。
- 条纹使用冷色,例如黑色、蓝色、绿色、靛蓝色。
- 空白位使用暖色,例如白色、红色、橙色、黄色。
- 透明的包装,底色要明显反差色。
二级码生成
在线二维码生成
(草料二维码):
https://cli.im/
java代码生成二维码
参考:https://www.cnblogs.com/huanzi-qch/p/10097791.html
ZXing(google开源),一个支持在图像中解码和生成条形码(如二维码、PDF 417、EAN、UPC、Aztec、Data Matrix、Codabar)的库。ZXing(“zebra crossing”)是一个开源的、多格式的、用Java实现的一维/二维条码图像处理库,具有到其他语言的端口。
- GitHub地址,猛戳:https://github.com/zxing/zxing
- API文档,猛戳:https://zxing.github.io/zxing/apidocs/index.html
- 介绍文档,猛戳:https://zxing.github.io/zxing/
前端二维码生成
后端生成我们可以用ZXing框架,那么前端js又应该如何生成、识别二维码呢?QRCode.js,QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。菜鸟教程,猛戳:http://www.runoob.com/w3cnote/javascript-qrcodejs-library.html
但是qrcode默认不支持自定义logo,怎么办呢?两种方法:
1、创建一个img标签,调整样式,让logo在二维码区域上居中显示
2、创建一个canvas画布,将二维码跟logo重新绘制,让logo在二维码区域上居中显示
app扫码下载
支付宝等其它app扫描,可以使用浏览器打开直接下载。微信扫码禁用的下载功能,可以使用旋风微跳,生成可以在微信可下载的二维码:
http://www.zjychina.cn/
但是旋风微跳类服务是收费的。
可以采用间接的方法支持微信扫描下载。
参考:https://www.jianshu.com/p/f6a6406e023f
核心代码如下:
goDownload();
// 去下载
function goDownload() {
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
// 是安卓浏览器
if (isAndroid) {
window.location.href = 'http://xxxxxxx.cn/release/xxxx-release.apk'; // 跳安卓端下载地址
}
// 是iOS浏览器
if (isIOS) {
window.location.href = 'https://itunes.apple.com/cn/app/xxxxxxx/id1124348115?mt=8'; // 跳AppStore下载地址
}
// 是微信内部webView
if (is_weixn()) {
alert("请点击右上角按钮, 点击使用浏览器打开");
}
// 是PC端
if (IsPC()) {
window.location.href = 'http://www.xxxxxxx.cn/index.html'; // 公司主页
}
}
// 是微信浏览器
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
臭味相投的朋友们,我在这里:
猿in小站:http://www.yuanin.net
csdn博客:https://blog.csdn.net/jiabeis
简书:https://www.jianshu.com/u/4cb7d664ec4b
微信免费订阅号“猿in”