通过js将RGB888转RGB565

什么是RGB565

通常我们前端接触的图片，R,G,B三个通道，每个通道占8位，一个字节，用数字表示是0-255。比如我们常写的CSS:rgb(255,255,255)，这样一个像素需要3个字节来表示。但是在一些物联网设备上，由于芯片性能，内存等的原因，同时对图像质量的要求不是很高，需要使用更少的字节来表示一个像素，于是有了RGB555,RGB565等数据格式。

RGB565是用两个字节十六位来存储像素点的信息，在RGB565中，R通道占据5位，G通道占据6位，B通道占据5位，示意图如下：

上面我们已经了解了RGB565，那么如何将RGB888转成RGB565呢？

截取法转RGB565

最简单粗暴的方法是舍掉低位的数据，加入一个颜色是：rgb(100, 150, 200)，那么转换成RGB565的方式如下：

let r = 100 >> 3;  // 舍掉3个低位
let g = 150 >> 2;  // 舍掉2个低位
let b = 200 >> 3; // 舍掉3个低位
const rgb565 =`${r.toString(2).padStart(5,0)}${g.toString(2).padStart(6,0)}${b.toString(2).padStart(5,0)}` // 0110010010111001

这样我们就得到了一个2字节的RGB565色值，在渲染的时候，再把r,g,b左移对应的位数，得到一个近似的色值，就可以还原成RGB888，下面有一个例子，展示了这种方式：

抖动法转RGB565

除了上面的方法外，还有一种抖动法来转换为RGB565的方式，可以参考这篇文章
https://cloud.tencent.com/developer/article/1547330?from=15425, jimp转换rgb565也是采用这种方式

参考

读取RGB565格式的图像: https://zhuanlan.zhihu.com/p/41216913