命令行二维码
感谢支持ayqy个人订阅号，每周义务推送1篇（only unique one）原创精品博文，话题包括但不限于前端、Node、Android、数学（WebGL）、语文（课外书读后感）、英语（文档翻译） 如果觉得弱水三千，一瓢太少，可以去 http://blog.ayqy.net 看个痛快
写在前面
发现一个有趣的东西，能在命令行显示二维码。日常一直是：
命令行起个sync服务
编辑器码码码，浏览器看看看
...码到差不多了
浏览器插件生成个二维码
掏出100个手机扫啊测啊
...咦，有问题
改改没好，场景比较复杂，得抽出来定位
复制个test文件
再生成个二维码，再扫再测，o了
...额，又发现个问题
...浏览器二维码插件差不多能满足需求，在IDE、浏览器、终端、Finder之间频繁切换，虽然有点麻烦，但没有发现更好的办法……直到看见命令行二维码，怎么可以这么机智
一.原理
看到“命令行二维码”，想也知道原理是什么：输出到屏幕时可以控制前景色、背景色、文本样式
要输出二维码，只要能改背景色就够了，用白空格黑空格就能拼出来
例如：
# 输出focus here
# focus黑底白字，空格默认，here蓝底白字加粗
echo "\e[40;0;37mfocus\e[0m \e[44;1;37mhere\e[0m"\e[0m重置为默认样式，一般控制序列格式为：
# \e[开头，m结尾
# 分号隔开的3个值分别是背景色、文本样式和前景色
\e[40;0;37m支持的值如下：
# 文本样式
0: 常规文本
1: 加粗文本
4: 下划线文本# 前景色30-37
30: 黑色
31: 红色
32: 绿色
33: 黄色
34: 蓝色
35: 紫色
36: 青色
37: 白色# 背景色40-47
40: 黑色
41: 红色
42: 绿色
43: 黄色
44: 蓝色
45: 紫色
46: 青色
47: 白色此外还有一些更强大的，比如移动光标、删除某行、清空屏幕等等，例如字符进度指示器：
echo -n '-'
arr=('\\' '|' '/' '-' '|' '100%')
for c in ${arr[@]};
do
# 等1秒
sleep 1
# 左移一格，输出字符
echo -en "\033[1D$c"
done二.具体实现
1.生成二维码元数据
根据输入的字符串，按照二维码规则计算出二值矩阵
这个过程手动实现起来比较费劲，因为二维码是一个有几百项专利的技术，见http://www.qrcode.com/en/patent.html，需要买（弄）个ISO Specification实现一遍：
Obtaining QR Code Specification QR Code is established as an ISO (ISO/IEC18004) standard. QR Code specification can, therefore, be purchased from this organization. Purchasing ISO Standards Please search by inputting ISO No.18004 or X0510 to “Search and ISO Catalogue”. http://www.iso.ch/iso/en/prods-services/ISOstore/store.html
不过不用那么费劲，因为有开源版本，且有各种语言实现：https://github.com/kazuhikoarase/qrcode-generator
但还是有必要了解一些概念：
- 尺寸（spec里叫
Version，上面的开源版实现里叫TypeNumber） 值为1到40，1对应最小矩阵21x21，40对应最大的177x177 - 定位图案 最明显的是二维码角角的3个回形框，3个点确定一个矩形。其它位置也有用来定位的图案
- 纠错级别
有
'L', 'M', 'Q', 'H'4个纠错级别，级别越高，容错率约高，携带的纠错数据也越多，所以才有个性化二维码 - 数据类型 保留数据（格式信息，版本信息，定位图案信息），实际数据信息和纠错数据
2.输出
上面提到的qrcode-generator主要js api如下：
// 创建实例
qrcode(typeNumber, errorCorrectionLevel) => QRCode
// 传入待编码串
addData(data, mode) => void// 计算矩阵
make() => void// 获取结果矩阵行列数（列数等于行数）
getModuleCount() => number
// 获取矩阵单元值
isDark(row, col) => boolean元数据有了，遍历矩阵拼接黑白空格字符串，输出：
// 黑白空格
var black = "\033[40m \033[0m",
white = "\033[47m \033[0m",
toCell = function (isBlack) {
return isBlack ? black : white;
},
repeat = function (color) {
return {
times: function (count) {
return new Array(count).join(color);
}
};
},
fill = function(length, value) {
var arr = new Array(length);
for (var i = 0; i < length; i++) {
arr[i] = value;
}
return arr;
};//...略去创建实例和计算矩阵部分// 遍历
var border = repeat(white).times(qrcode.getModuleCount() + 3);
output += border + '\n';
qrcode.modules.forEach(function (row) {
output += white;
output += row.map(toCell).join('');
output += white + '\n';
});
output += border;// 输出
console.log(output);然后就能在命令行显示一个大大的二维码了，如图：
terminal-qrcode
3.命令行优化
但是，在命令行显示的话，尺寸太大
二维码最小尺寸也是21x21，黑框里21行几乎占满默认一屏了，码稍长一点就显示不全了，而一般url码都超过21行，例如：
// 在纠错级别为M（默认）时
// 21行的二维码只能显示14个字符
https://www.ay
// 22行的只能显示26个字符
https://www.ayqy.net/blog/
//...所以要想办法让输出的二维码行列尺寸小一点，最容易想到的就是用奇怪的Unicode字符拼：
unicode-block
再把列空格数量减半，这样宽高尺寸就都能缩小一半，如图：
terminal-qrcode-small
虽然丑一点，但仍然是可用的。那么还能不能更小，如果想缩小两半呢？
用同样的方法做不到，因为Unicode字符只有“下四分之一方块”、“下四分之三方块”和“左四分之三方块”、“左四分之一方块”，不够用了
三.开源npm包
很巧的是，上面提到的所有事情都有人做了：qrcode-terminal-alpha
把命令行二维码添进工作流工具里，构建完毕直接显示二维码，扫码会方便不少
参考资料
- QR Code Generator：在线二维码生成器
- kazuhikoarase/qrcode-generator：js api
- 二维码的生成细节和原理