原文出處：https://www.haorooms.com/post/color_rgb_transform
延伸閱讀：用js生成全色系調(diào)色盤的算法
前言
今天做了這個(gè)需求要出，就是前端支持rgba設(shè)置农渊，但是后臺(tái)生成圖片的時(shí)候不支持rgba,需要2個(gè)值砸紊。分別是一個(gè)十六進(jìn)制顏色值和一個(gè)opacity透明度，這就要我這邊傳值的時(shí)候醉顽，把原來(lái)的rgba轉(zhuǎn)換成2個(gè)值游添，然后傳給后臺(tái)通熄。（注唇辨，之所以前端沒(méi)有分成2個(gè)字段能耻，是因?yàn)榍岸嗽O(shè)置顏色的時(shí)候直接用一個(gè)rgba設(shè)置的晓猛，這樣用戶體驗(yàn)好，分別設(shè)置顏色和透明度的話栗恩，還要分2次洪燥，對(duì)用戶來(lái)說(shuō)稍微有點(diǎn)麻煩。）
轉(zhuǎn)換方法其實(shí)網(wǎng)上搜索也能搜索到亲澡，這里暫時(shí)列一下:
varcolorHex =function(color){
varthat = color;
//十六進(jìn)制顏色值的正則表達(dá)式
varreg =/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是rgb顏色表示
if(/^(rgb|RGB)/.test(that)) {
varaColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
varstrHex ="#";
for(vari=0; i
varhex =Number(aColor[i]).toString(16);
if(hex.length<2) {
hex ='0'+ hex;
? ? ? ? ? ? }
? ? ? ? ? ? strHex += hex;
? ? ? ? }
if(strHex.length!==7) {
? ? ? ? ? ? strHex = that;? ?
? ? ? ? }
returnstrHex;
}elseif(reg.test(that)) {
varaNum = that.replace(/#/,"").split("");
if(aNum.length===6) {
returnthat;
}elseif(aNum.length===3) {
varnumHex ="#";
for(vari=0; i
? ? ? ? ? ? ? ? numHex += (aNum[i] + aNum[i]);
? ? ? ? ? ? }
returnnumHex;
? ? ? ? }
? ? }
returnthat;
};
colorHex('rgb(255,255,255)')
"#ffffff"
varcolorRgb =function(sColor){
sColor = sColor.toLowerCase();
//十六進(jìn)制顏色值的正則表達(dá)式
varreg =/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16進(jìn)制顏色
if(sColor && reg.test(sColor)) {
if(sColor.length===4) {
varsColorNew ="#";
for(vari=1; i<4; i+=1) {
sColorNew += sColor.slice(i, i+1).concat(sColor.slice(i, i+1));
? ? ? ? ? ? }
? ? ? ? ? ? sColor = sColorNew;
? ? ? ? }
//處理六位的顏色值
varsColorChange = [];
for(vari=1; i<7; i+=2) {
sColorChange.push(parseInt("0x"+sColor.slice(i, i+2)));
? ? ? ? }
return"RGB("+ sColorChange.join(",") +")";
? ? }
returnsColor;
};
colorRgb("#fff")
"RGB(255,255,255)"
方法二： 用dom的方式
varcolorToRgb =function(color) {
vardiv =document.createElement('div');
div.style.backgroundColor= color;
document.body.appendChild(div);
varc =window.getComputedStyle(div).backgroundColor;
document.body.removeChild(div);
returnc;
};
一、HSL轉(zhuǎn)RGB
/**
* HSL顏色值轉(zhuǎn)換為RGB.
* 換算公式改編自 http://en.wikipedia.org/wiki/HSL_color_space.
* h, s, 和 l 設(shè)定在 [0, 1] 之間
* 返回的 r, g, 和 b 在 [0, 255]之間
*
*@paramNumber? h? ? ? 色相
*@paramNumber? s? ? ? 飽和度
*@paramNumber? l? ? ? 亮度
*@returnArray? ? ? ? ? RGB色值數(shù)值
*/
functionhslToRgb(h, s, l) {
varr, g, b;
if(s ==0) {
r = g = b = l;// achromatic
}else{
varhue2rgb =functionhue2rgb(p, q, t) {
if(t <0) t +=1;
if(t >1) t -=1;
if(t <1/6)returnp + (q - p) *6* t;
if(t <1/2)returnq;
if(t <2/3)returnp + (q - p) * (2/3- t) *6;
returnp;
? ? ? ? }
varq = l <0.5? l * (1+ s) : l + s - l * s;
varp =2* l - q;
r =hue2rgb(p, q, h +1/3);
g =hue2rgb(p, q, h);
b =hue2rgb(p, q, h -1/3);
? ? }
return[Math.round(r *255),Math.round(g *255),Math.round(b *255)];
}
二癞己、RGB轉(zhuǎn)HSL
/**
* RGB 顏色值轉(zhuǎn)換為 HSL.
* 轉(zhuǎn)換公式參考自 http://en.wikipedia.org/wiki/HSL_color_space.
* r, g, 和 b 需要在 [0,255] 范圍內(nèi)
* 返回的 h, s, 和 l 在 [0,1] 之間
*
* @param? Number? r? ? ? 紅色色值
* @param? Number? g? ? ? 綠色色值
* @param? Number? b? ? ? 藍(lán)色色值
* @returnArray? ? ? ? ? HSL各值數(shù)組
*/
functionrgbToHsl(r, g, b){
r /=255, g /=255, b /=255;
varmax= Math.max(r, g, b),min= Math.min(r, g, b);
var h, s, l = (max+min) /2;
if(max==min){
h = s =0; // achromatic
}else{
var d =max-min;
s = l >0.5? d / (2-max-min) : d / (max+min);
switch(max) {
case r: h = (g - b) / d + (g < b ?6:0);break;
case g: h = (b - r) / d +2;break;
case b: h = (r - g) / d +4;break;
? ? ? ? }
h /=6;
? ? }
return[h, s, l];
}
? watch: {
'background'(val) {
// 轉(zhuǎn)換成2個(gè)字段痹雅，用了比較笨的辦法轉(zhuǎn)吧
let tempval =val.replace('rgba(','').replace(')','').split(',')
this.$set(this.haorooms.data,'background', {})
this.$set(this.haorooms.data.background,'color', `rgb(${tempval[0]},${tempval[1]},${tempval[2]})`)
this.$set(this.haorooms.data.background,'opacity', tempval[3])
? ? }
? }
if(this.haorooms.data.background) {
let color =this.colorToRgb(this.templateData.data.background.color)// 上面列舉的方法
let tempval = color.replace('rgb(','').replace(')','').split(',')
tempval.push(this.templateData.data.background.opacity)
this.background = `rgba(${tempval.join(',')})`
}
