小程序蓝牙打印机CPCL指令图片打印问题梳理
本文以汉印HM-T3便携式打印机示例讲解
手册中要求需要用ASCII码十六进制字符下发命令,源引自 有赞零售小票打印跨平台解决方案
图片处理
由于 JS 引擎是不能解析图片文件的,所以在最初模板中存在图片链接时,全部由移动端进行处理,然后进行替换。图片处理主要就是下载图片,图片压缩,二值图处理,图片像素点压缩(打印指令要求),每个字节转换成 16 进制,拼接 16 进制字符串。
下载图片
采用 SDWebImage 进行下载缓存,创建并行队列进行多图片下载,每下载成功一张后回到主线程进行后续的相关处理。所有图片都处理完成或,回调给 JS 引擎进行指令解析。
图片压缩
根据 JS 引擎模板要求的 width(必须是 8 的倍数,后续说明),进行等比例压缩,转换成 jpg 格式,过滤掉 alpha 通道。
二值图处理
遍历每一个像素点,进行 RGB 取值,然后算出 RGB 均值与 255 的比值,根据比值进行取值 0 或 255 。这里没有使用直方图寻找阈值 T 的方式进行处理,是出于性能和时间考虑。
像素点压缩
由于打印机指令要求,需要对转换成二值后的每个点进行 width 上压缩,需要将 8 个字节压缩到 1 个字节,这里也是为什么图片压缩时 width 必须是 8 的倍数的原因,否则打印出来的图片会错位。
这里有两点需要清楚:1、图片的宽度需要处理,必须是8的倍数,不是的话余位补0, 2、对于8个字节压缩到1个字节的理解:每个像素点由R:0-255、G:0-255、B:0-255 、A:0-1 四个数值构成,图像二值化就是根据rgb的平均值跟阈值作比较,最终像素点变为了1或者0,(
注意:二值化的结果是像素点变为了0或者1,而不是rgba的值变为0或者1
var hexLookup = {
'0000': '0',
'0001': '1',
'0010': '2',
'0011': '3',
'0100': '4',
'0101': '5',
'0110': '6',
'0111': '7',
'1000': '8',
'1001': '9',
'1010': 'A',
'1011': 'B',
'1100': 'C',
'1101': 'D',
'1110': 'E',
'1111': 'F'
};
for (var i = 0; i < pix.length; i += 4) {
var colour = {
red: pix[i],
green: pix[i + 1],
blue: pix[i + 2],
alpha: pix[i + 3]
};
var intensity = (colour.red + colour.green + colour.blue);
if (intensity >= 128)
binary = binary + '0';
else
binary = binary + '1';
}
var hex = '';
var yu = binary.length % 4
if (yu != 0) {
for (var i = 0; i < 4-yu; i++) {
binary+="0"
}
}
for (var i = 0; i < binary.length; i += 4) {
var current = binary[i] + binary[i + 1] + binary[i + 2] + binary[i + 3];
hex = hex + hexLookup[current];
}
return hex;)
16 进制字符串
因为打印机打印图片接收的是 16 进制字符串,所以需要将处理后的每个字节转换成 16 进制字符,然后拼成一个字符串。
这里感谢赵同学提供的java版后台将图片转换完成后返回给前端,直接打印,里面的代码没看明白算法原理,但是可以使用