mqtt传输图片并在网页上显示
前言
由于最近在做水果识别系统,打算将识别出的结果传输到微信小程序,由于微信小程序限制太多,先在网页上进行实验
开源mqtt.js库
mqtt.js是一个开源的js库,而且兼容微信小程序,使用也比较简单,github网址mqtt.js,这里使用cdn的方式使用。
<script src="https://unpkg.com/mqtt@2.18.8/dist/mqtt.min.js"></script>
首先初始化信息
const options = {
// 认证信息
clientId: '设备id',
username: '用户名',
password: '密码',
}
然后进行连接
const client = mqtt.connect('ws://域名或ip:端口号/mqtt', options);
因为我使用的是自己搭建的mqtt服务端,没有域名,所以这里我选择ws方式,除了ws还有wss方式,两者的区别是ws不安全,wss较为安全,ws的默认端口为8083,wss默认端口为443
订阅主题
client.subscribe('主题名');
然后是发送
client.publish(topic, message, 可选q0s)
然后是接受函数
client.on('message', function (topic, message) {
在这里处理
})
base64 编码
由于esp32的ram较小,只有512k,运行是用户可用的ram只剩200k左右,在传输图片是采用jpeg压缩,jpeg是一种有损压缩,压缩后可将图片体积大大减小,k210采集的图片为224224,如果采用rgb565,需要的大小大概为224224*2/1024=98k,这个大小对于esp32来说太大了,故在k210上对图片进行压缩,采用网上的一个c语言压缩代码,转换为jpg文件,压缩后大概15k。
压缩完成之后为二进制,二进制在传输过程中比较麻烦,一般为了传输方便都会对二进制流进行base64编码,base64编码完成之后可以完全用字符串表示
base64编码的原理就是将3个字节的内容用4个字节表示,可能这个时候就有些困惑,这不体积变大了吗?是的,编码后体积会变大三分之四,但是编码后传输更加方便
这里借鉴披荆又斩棘的讲解base64原理
在编码完之后所以的数据都可以用字符串表示,而且js可以直接显示base64流。下面为esp32 base64的编码代码
static const char *ALPHA_BASE = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
char *encode(const char *buf, const long size, char *base64Char) {
int a = 0;
int i = 0;
while (i < size) {
char b0 = buf[i++];
char b1 = (i < size) ? buf[i++] : 0;
char b2 = (i < size) ? buf[i++] : 0;
int int63 = 0x3F; // 00111111
int int255 = 0xFF; // 11111111
base64Char[a++] = ALPHA_BASE[(b0 >> 2) & int63];
base64Char[a++] = ALPHA_BASE[((b0 << 4) | ((b1 & int255) >> 4)) & int63];
base64Char[a++] = ALPHA_BASE[((b1 << 2) | ((b2 & int255) >> 6)) & int63];
base64Char[a++] = ALPHA_BASE[b2 & int63];
}
switch (size % 3) {
case 1:
base64Char[--a] = '=';
case 2