微信小程序蓝牙打印二维码

会有很多算是废话的内容,但是都是我踩的坑,顺便记录下。(不一定适用所有的打印机,)

由于这个项目我只负责二维码打印,所以前面的蓝牙连接,文字打印我就不多说了,我自己也不是很清楚。不过有一点我是要说下的,要注意ios和安卓的不同,安卓一次只能写入不超过20字节(ios具体不清楚,当时代码交到我手上是说只有二维码没写,后面才发现我的手机文字内容无法全部打印),建议是直接截取数据data.slice(20, byteLength),打印成功再次回调。

我的项目需求是根据订单号生成二维码,然后二维码可以打印出来,生成二维码的话,建议使用weapp.qrcode.js (https://github.com/yingye/weapp-qrcode), 需要注意的是可能会有一个问题,text的值如果是变量的话,可能会打印出来空的二维码,我的问题是没有强制转成string,改成 text: String(orderNo),就可以了。

好了,现在我们开始进入正题,首先来说下思路:

首先我们需要读取二维码内容,然后把内容转成打印机认可的格式也就是ArrayBuffer,然后打印就好啦。

好了,问题来了,读什么内容,怎么转换?(API自行去官方文档查看
最开始我和我老大是不同的想法,我觉得我可以canvas画图生成二维码之后,将图片用wx.canvasToTempFilePath把内容导出生成指定大小的图片,然后保存图片wx.saveFile,然后读取文件内容wx.getFileSystemManager().readFile({}),正好返回的格式是ArrayBuffer,这不就出来了嘛,然而事实证明,我老大永远是我老大,我打印出来的是乱码。

圈重点啦!

老大和我说的是,我们需要读取得数据是像素点的 rgba,事实证明是的,我们要用的就是这个内容!用wx.canvasGetImageData

接下来,我们改如何转换呢?
嗯,接下来就是除了老大说,还有个参考网址,不过不是js代码的哦~(https://www.jianshu.com/p/dd6ca0054298)

老大看着那个网址,原话不好说,大概就是,数据要4合1,然后8合1,大概就是这个意思吧。

具体是这样的:

  1. 首先我们读取内容的APIwx.canvasGetImageData文档明确说明了,它的返回值是Uint8ClampedArray data,是图像像素点数据,一维数组,每四项表示一个像素点的 rgba;
  2. 然后要做黑白化!!这个时候就可以做4合1的内容了!我本来想着二维码不是黑就是白,肯定不是255就是0,其实还是会有一小部分是其他数值的,这个要注意哦!公式我用的另一个网址的公式,但是差不多,另外我投机取巧了一下,每4位是一个像素点的rgba,然后黑白色的rgb就是(0,0,0)和(255,255,255),所以我每四位只把第一位黑白化,然后将每四位的第一位取出来作为新的数组,当rule>200的时候,值取0,表示不打印,否则取1,表示打印;
for (let i = 0; i < res.length; i++) {
  if (i % 4 == 0) {
    let rule = 0.29900 * res[i] + 0.58700 * res[i + 1] + 0.11400 * res[i + 2];
      if (rule > 200) {
        res[i] = 0;
      } else {
        res[i] = 1;
      }
      arr.push(res[i]);
  }
}
  1. 4合1已经好了,接下来开始8合1,每8个像素点组成一个字节;下面的代码可能会有人不理解,举个例子:

假如我们取出来的8位数是[0,0,0,0,0,0,0,1],这个时候8合1,我们需要进行进制转换,从右往左是2的零次方,2的一次方,等等,依次上加,实际是 0 * 27 + 0 * 26 + 0 * 25 + 0 * 24 + 0 * 23 + 0 * 22 + 0 * 21 + 1 * 20,这个数就是我们要的最终数据的其中之一。

for (let k = 0; k < arr.length; k += 8) {
  let temp = arr[k] * 128 + arr[k + 1] * 64 + arr[k + 2] * 32 + arr[k + 3] * 16 + arr[k + 4] * 8 + arr[k + 5] * 4 + arr[k + 6] * 2 + arr[k + 7] * 1
  data.push(temp);
}
  1. 差不多要到最后了,数据要准备打印了,直接打印?
    那肯定不可以!首先我们的数据还没有转换成ArrayBuffer,其次打印必须要有指令!参考网址以及标准的ESC-POS指令集,下面代码中的数字都是指令,另外,由于我这边的打印机支持的是gb2312格式,所以我在转成ArrayBuffer的同时,我还需要把编码格式转成正确的格式。

toArrayBuffer()这个参考buffer,可以在小程序里npm,然后构建npm就好了,网址是:(https://www.npmjs.com/package/buffer),以及 文档:(https://nodejs.org/api/buffer.html)

const cmds = [].concat([27, 97, 49], [29, 118, 48, 0, 20, 0, 160, 0], data, [27, 74, 3], [27, 64]);
const buffer = toArrayBuffer(Buffer.from(cmds, 'gb2312'));

好了,差不多就是这样了,整个流程!接下来直接调用wx.writeBLECharacteristicValue就好了。

emmm,多说几个题外话,比如

  1. 我需要把二维码和文字内容合在一起,文字部分,
    let text = new encoding.TextEncoder("gb2312", { NONSTANDARD_allowLegacyEncoding: true }).encode(str).buffer;
    这就已经转成ArrayBuffer了,但是两个ArrayBuffer是不可用concat()方法拼接的,所以我可以少一点,
    let text = new encoding.TextEncoder("gb2312", { NONSTANDARD_allowLegacyEncoding: true }).encode(str);
    少个".buffer",这个时候的结果是Unit8Array,也和cmds不一样,所以再转一次,
    let newText = Array.from(text)
    好了现在cmds和newText都是普通的array了,concat()方法拼接好之后统一做一个
    toArrayBuffer(Buffer.from(finalArray, 'gb2312'));
  2. 最开始的时候,有个错误的想法,因为当初试验40 * 40的二维码是可以打印成功的,但是160 * 160就只能打印一部分,就在怀疑是不是因为data太大,所以才会不能打印完全二维码?
    我尝试了切割数据,进行处理,以小数组循环的方式进行打印,结果是乱码。所以不要随便切整合好的数组数据data,后来发现其实是其他问题,注意[29, 118, 48, 0, 20, 0, 160, 0]里的20160 !!这个要根据网址好好研究!

**

后补:重点来了,新坑!!

当你二维码画出来之后,千万不要真机调试,预览成功后,直接去体验版测试!!捣鼓了半天,发现不是代码问题也是心累了。

**
根据各位兄弟问问的问题,我补点遗漏点吧

  1. toArrayBuffer ,是个组件,要安装的,https://www.npmjs.com/package/to-array-buffer 或者你用这种写法也可以const buffer = new Uint8Array(Buffer.from(cmds, 'gb2312')).buffer;
  2. 注意查看自己的数据是否正确,画图的数据有问题的话,也可能打印出黑块;
  3. 我之前画图那边没有贴出来,会在下面补上;
  4. 各位大哥请看我这里一眼,数据要算!!!要算!!要算!! ,比如我画图是160*160 ,然后我打印数据拼接的指令[29, 118, 48, 0, 20, 0, 160, 0]这个里面的20160 这个就是算的,参考我给的链接(https://www.jianshu.com/p/dd6ca0054298)看下原因,大概就是1:8,然后画图和读图的数据一致,大家都懂的吧;
  5. 打印数据!!!20字节一次!!wx.writeBLECharacteristicValue() 这个里面的value, 我是这样写的value: buffer.slice(0, 20),

画图的

const ctx = wx.createCanvasContext('canvas');
ctx.clearRect(0, 0, 160, 160);
qrcode = drawQrcode({
  canvasId: 'canvas',
  text: String('test'),
  width: 160,
  height: 160,
  callback(e) {
    setTimeout(() => {
      // 获取图片数据
      wx.canvasGetImageData({
     	canvasId: 'canvas',
        x: 0,
        y: 0,
        width: 160,
        height: 160,
        success(res) {}
	  })
    }, 1000);
  }
});                      
评论 47
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值