原文出处：https://www.haorooms.com/post/color_rgb_transform
延伸阅读：用js生成全色系调色盘的算法
前言
今天做了这个需求，就是前端支持rgba设置，但是后台生成图片的时候不支持rgba,需要2个值。分别是一个十六进制颜色值和一个opacity透明度，这就要我这边传值的时候，把原来的rgba转换成2个值，然后传给后台。（注，之所以前端没有分成2个字段，是因为前端设置颜色的时候直接用一个rgba设置的，这样用户体验好，分别设置颜色和透明度的话，还要分2次，对用户来说稍微有点麻烦。）
转换方法其实网上搜索也能搜索到，这里暂时列一下:
varcolorHex =function(color){
varthat = color;
//十六进制颜色值的正则表达式
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();
//十六进制颜色值的正则表达式
varreg =/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16进制颜色
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转RGB
/**
* HSL颜色值转换为RGB.
* 换算公式改编自 http://en.wikipedia.org/wiki/HSL_color_space.
* h, s, 和 l 设定在 [0, 1] 之间
* 返回的 r, g, 和 b 在 [0, 255]之间
*
*@paramNumber h 色相
*@paramNumber s 饱和度
*@paramNumber l 亮度
*@returnArray RGB色值数值
*/
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转HSL
/**
* RGB 颜色值转换为 HSL.
* 转换公式参考自 http://en.wikipedia.org/wiki/HSL_color_space.
* r, g, 和 b 需要在 [0,255] 范围内
* 返回的 h, s, 和 l 在 [0,1] 之间
*
* @param Number r 红色色值
* @param Number g 绿色色值
* @param Number b 蓝色色值
* @returnArray HSL各值数组
*/
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) {
// 转换成2个字段，用了比较笨的办法转吧
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(',')})`
}
网友评论