通过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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章