微信小程序RGB888转RGB565并得到16进制数据

参考文章1

一、图像格式简介

计算机中图像基本是以 RGB888 格式显示的，特别是在我们常用的电脑计中，24 位图每个像素保存了 32bit 的数据，即 RGB888+Alpha，Alpha 即半透明填充字节。对于真彩的图像而言，肉眼在16bit 的时候已经难以分辨了，很多时候时候我们可以将 RGB888 转换为 RGB565 来存储，减少了存储器的容量的同时，降低了数据量。在显示的时候，我们再把 RGB565 转换为 RGB888，实现数据宽度的匹配。RGB888 总共使用24 位（三个字节）二进制数值表示，但是需要占用 四个字节存储空间，RGB565 总共使用 16 位（二个字节）二进制数值表示，刚好占用二个字节存储空间。

二、什么是RGB565

三、主要实现代码

		initImgData565(imgUrl) {
				return new Promise((resolve, reject) => {
					let that = this;
					uni.createSelectorQuery().select('#canvasImg').fields({
						node: true,
						size: true
					}).exec((res) => {
						console.log("canvas", res);
						const canvas = res[0].node;
						const ctx = canvas.getContext('2d');
						// var dpr = wx.getSystemInfoSync().pixelRatio // 设备像素比
						var dpr = 1;
						canvas.width = res[0].width * dpr
						canvas.height = res[0].height * dpr
						// ctx.scale(dpr, dpr)
						let sideWLen = 135;
						let sideHLen = 240;
						ctx.fillRect(0, 0, sideWLen, sideHLen);
						const img = canvas.createImage();
						img.src = "/static/images/0.jpeg";
						img.onload = () => {
							ctx.drawImage(img, 0, 0, sideWLen, sideHLen);
							var myImageData = ctx.getImageData(0, 0, sideWLen, sideHLen);
							console.log("imageData", myImageData)
							var imageData = myImageData.data;
							const rgb565ImageData = ctx.createImageData(sideWLen, sideHLen);
							var rgbStr = "";
							var rgb = 0;
							var rgb565 = '';
							//竖向扫描
							// for (var i = 0; i < sideWLen; i++) {
							// 	for (var j = 0; j < sideHLen; j++) {
							// 		const index = ((j * (myImageData.width * 4)) + (i * 4));
							// 		const r = myImageData.data[index];
							// 		const g = myImageData.data[index + 1];
							// 		const b = myImageData.data[index + 2];
							// 		const a = myImageData.data[index + 3];
							// 		let rr = r >> 3;
							// 		let gg = g >> 2;
							// 		let bb = b >> 3;
									
							// 		let tempByte = `${rr.toString(2).padStart(5,0)}${gg.toString(2).padStart(6,0)}${bb.toString(2).padStart(5,0)}`;
							// 		let byte1 = tempByte.substring(0, 8);
							// 		let byte2 = tempByte.substring(8, 16);
							// 		rgb565 += (parseInt(byte2, 2).toString(16).padStart(2, 0)+parseInt(byte1, 2).toString(16).padStart(2, 0) )
							// 	}
							// }
							//横向扫描
							for (var j = 0; j < sideHLen; j++) {
								for (var i = 0; i < sideWLen; i++) {
									const index = ((j * (myImageData.width * 4)) + (i * 4));
									const r = myImageData.data[index];
									const g = myImageData.data[index + 1];
									const b = myImageData.data[index + 2];
									const a = myImageData.data[index + 3];
									let rr = r >> 3;//右移3位，舍弃三个低位
									let gg = g >> 2;//右移2位，舍弃二个低位
									let bb = b >> 3;//右移3位，舍弃三个低位
									
									let tempByte = `${rr.toString(2).padStart(5,0)}${gg.toString(2).padStart(6,0)}${bb.toString(2).padStart(5,0)}`;//补位 5 6 5
									let byte1 = tempByte.substring(0, 8); //分割字节
									let byte2 = tempByte.substring(8, 16);
									rgb565 += (parseInt(byte2, 2).toString(16).padStart(2, 0)+parseInt(byte1, 2).toString(16).padStart(2, 0));//2进制再转化为16进制，调整低位再前，高位再后
								}
							}
							console.log("rgb565===", rgb565.toUpperCase()) //得到RGB565 16进制数据
						}
						//img.src = imgUrl;
					})
				})
			},