什麼是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