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

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