顏色轉換

sXin發表於2019-03-31

本文主要為實現RGB顏色的高亮，採用RGB轉為YUV，增加亮度，再將顏色轉為RGB的方式實現高亮。

RGB

RGB色彩模式是工業界的一種顏色標準，是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB即是代表紅、綠、藍三個通道的顏色;但是不容易表示統一色階亮度的變化

YUV

YUV的原理是把亮度與色度分離，研究證明,人眼對亮度的敏感超過色度。。YUV三個字母中，其中”Y”表示明亮度，可用該屬性實現顏色亮度的增加

高亮原理

  • 將rgb顏色轉為yuv顏色
  • 增加y的值實現亮度的增加
  • 將結果轉回rgb

轉換公式

  • rgb -> yuv
    Y = (77*R + 150*G + 29*B)>>8;
    U = ((-44*R  - 87*G  + 131*B)>>8) + 128;
    V = ((131*R - 110*G - 21*B)>>8) + 128 ;
複製程式碼
  • yuv -> rgb
    R= Y + ((360 * (V - 128))>>8) ; 
    G= Y - (( ( 88 * (U - 128)  + 184 * (V - 128)) )>>8) ; 
    B= Y +((455 * (U - 128))>>8) ;
複製程式碼

程式碼實現

colorStr為rgb顏色 colorUp為需要提高的亮度

function rgbaToYUV(colorStr,colorUp){
	var R,G,B,A,Y,U,V,colorArr,reusultColor;
	colorArr = colorStr.substring((colorStr.indexOf('(')+1),(colorStr.indexOf(')'))).split(',');//擷取rbg三個值
	R = colorArr[0],
	G = colorArr[1],
	B = colorArr[2],
	A = colorArr[3];
	Y = (77*R + 150*G + 29*B)>>8;
	U = ((-44*R  - 87*G  + 131*B)>>8) + 128;
	V = ((131*R - 110*G - 21*B)>>8) + 128 ;
	return YUVToRgba(Y,U,V,A,colorUp);
}
function YUVToRgba(Y,U,V,A,addValue){
	var R,G,B;
	Y = Y + addValue;//增加亮度
	R= Y + ((360 * (V - 128))>>8) ; 
	G= Y - (( ( 88 * (U - 128)  + 184 * (V - 128)) )>>8) ; 
	B= Y +((455 * (U - 128))>>8) ;
    return 'rgba('+R+','+G+','+B+','+A+')';
}
複製程式碼

相關文章