小程序蓝牙传输二维码

蓝牙传输二维码：从生成到点阵转换

最新推荐文章于 2024-07-22 10:17:25 发布

原创

最新推荐文章于 2024-07-22 10:17:25 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何通过小程序实现蓝牙设备显示二维码。首先，利用qrcode.js生成64px乘64px的二维码图片，接着解析canvas获取像素数组并转换为二进制状态码，再将这些码转化为byte数组以便通过蓝牙发送。关键步骤包括处理异步的draw方法和canvasGetImageData，以及在WXML和WXSS中的布局设置。

有个需求：蓝牙要显示二维码，需要得到二维码的位图（点阵图、矩阵图）。

实现思路：

1.获得canvas的二维码图片,要求为64px乘64px

2.获得二维码的图片，然后解析像素数组，获得像素的二进制状态码

3.将二进制状态码转化为byte数组，然后发送给蓝牙。

这里强调一点，draw方法和canvasGetImageData都是异步加载，需要通过promise来做等待处理。

首先，按照网上通用的二维码生成代码实现获得二维码矩阵，使用qrcode.js来获得。

核心代码为draw方法：

/**
	   * 新增$this参数，传入组件的this,兼容在组件中生成
	   */
	  draw: function (str, canvas, cavW, cavH, $this) {
		  console.log("draw");
		  var that = this;
		  // ecclevel = ecc || ecclevel;
		  // console.log("ecclevel>>" + ecclevel);
		  canvas = canvas || _canvas;
		  if (!canvas) {
			console.warn('No canvas provided to draw QR code in!')
			return;
		  }
		  var size = Math.min(cavW, cavH);
		  str = that.utf16to8(str); //增加中文显示
	
		  var frame = that.getFrame(str),
			// 组件中生成qrcode需要绑定this 
			ctx = wx.createCanvasContext(canvas, $this),
			px = (size / (width + 8));
			console.log("width>>1>>" + width);
			console.log("frame>>" + frame)