由于 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';
						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版后台将图片转换完成后返回给前端,直接打印,里面的代码没看明白算法原理,但是可以使用

public static void main(String[] args) throws IOException { //String target = "/Users/zhiyu/Desktop/test/aaa_bin.bmp"; String target = "/Users/zhiyu/Desktop/test/test.jpg"; File file = new 最近项目需求需要打印一个小票,百度了一下,都是那几篇文章,而且都是有固定API,可以判断切纸,长度的那种.实际中我这边便携式蓝牙打印机根本就没有API,只能通过写模板,其中涉及到CPCL的模板一些用法,记录一下. 如果需要仔细研究CPCL打印机方面,请google/百度搜索 斑马CPCL说明文档. 这次弄小票的打印模板,研究了下公司maven里面bluetoothlibrary... 微信小程序连接蓝牙打印机示例 示例完整的代码 小程序连接蓝牙打印机打印文本与二维码等示例在 github 上都能找到一些,唯独打印图片这个案例几乎没有。最早在 CSDN 找到 微信小程序蓝牙连接 TSPL 打印机打印图片思路 这篇文章,代码完整性很缺,被坑一周。继续找资料摸索解决了打印图片这个问题。 测试打印机:凯盛诺 PTP-II-UBC 58mm 便携热敏打印机 测试环境有:Android ... EG 5 32 08 08 01FFFFFF8003FFFFFFC007FFFFFFE00FFFFFFFF01FFFFFFFF83FFFFFFFFC7FFFFFFFFEFFFFFFFFFFFFFFFFFFFFFFFE7FFFFFFFFC3FFFFFFFF81FFFFFFFF00FFFFFFFE007FFFFFFC003FFFFFF8001FFFFFF00 1,打印按钮页面 <button type="default" @click="print">打 印</button> <iip-gp-printer ref="printer"></iip-gp-printer> <script> import i. CPCL是目前蓝牙打印机流行的指令集,但是CPCL只方便阅读,但是对应的效果图不太直观。 这里有款简单方便好用的工具,可以查看CPCL/TSPL指令,只需要打开工具,把CPCL指令文件命名为"*.hex",然后打开工具, 鼠标双击工具中央就可以查看效果对应的指令效果,如下所示。 如下图,左边为CPCL指令数据,右边为对应的效果图。 一款蓝牙学习微信小程序,刚学习微信小程序的值得学习,里面介绍了蓝牙的 启动 配对 传送 和sleep 的全过程,可以电脑配对 手机配对 蓝牙耳机配对..... 也是刚学习的时候一步步研究的,现在分享出来,让刚学习的童鞋们少走弯路! Twilio功能 Particle Build Web IDE 我的妻子定期去外地工作,我想要一个额外的方式在她外出时送她一些特别的东西。我提出了制作Love Notes的想法,这是一个小盒子,她可以插在她的酒店,我可以随时给她发送一些小信息。 设置 - 硬件 在盒子上切一个洞,然后将热敏打印机放在里面。按照此项目底部的原理图将热敏打印机连接到Electron并接通电源。将Soracom SIM插入电子设备。 设置 - 软件 该系统有两个主要部分:1)打印发送给Electron的消息和2)通过SMS向Electron发送消息。对于第1部分,我们将设置粒子电子来打印通过webhook接收的消息。对于第2部分,我们将使用Twilio函数来处理接收SMS文本并将其发送到Electron。 详细的设置步骤详见附件!