文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>实现RGB与Hex相互转换

实现RGB与Hex相互转换

时间:2011-04-08  来源:Matin

Rgb采用的是10进制的方法,而hex是16进制;2者相互转换的原理就是利用进制的相互转换;现在CSS3中可以采用Rgba模式,现在只有少量的浏览器支持rgba;jQuery里面没有实现这个工具,mooTools里面有,关于10进制和16进制之间的转换方法和原理,这里不详细介绍,大伙可以自己找点资料读下;

先是HextoRgb:

hexToRgb:function(hexStr,opacity,plainArr){
        var hex=/^(?:#)?([\dA-Fa-f]{6})$/,getMatch,splitHex=/(?:[\dA-Fa-f]){2}/g,i=0;
        if(hexStr.length===3||hexStr.length===4){hexStr=hexStr.replace(/([\dA-Fa-f])/g,"$1$1");}
        if(getMatch=hex.exec(hexStr)){
        getMatch=getMatch[1].match(splitHex);
        getMatch=this.map(getMatch,this.base,function(value,base){
     var len=value.length,curValue=[],intHex,result;
        if(len!==3){return;};
                for(;i<len;i++){
                intHex=this.toParseInt.call(this,value[i],base);
                        if(!isNaN(intHex)){
                        curValue[curValue.length]=intHex;
                        }
                }
                if(opacity<=1&&opacity>=0){curValue.push(opacity)};
                result=!plainArr?curValue:(opacity<=1&&opacity>=0)?"rgba("+curValue+")":"rgb("+curValue+")";
        return result;
                });
                };
        return getMatch;
        }
hexToRgb使用方法:
var testHtoR=tranHR.hexToRgb("#fff",0.6,false);
var testHtoR1=tranHR.hexToRgb("fff",false);
var testHtoR2=tranHR.hexToRgb("#FFFFFF",0.6,false);
第二个参数决定返回rgba还是rgb格式的;
第三个参数表示是否返回纯数组还是格式化的字符串;

然后RgbtoHex:

RgbToHex:function(rgb,plainStr){
var getMatch,x,i=0;
var sure=rgb.replace(/(rgba|rgb)?([\(\)])?/g,"");
if(getMatch=sure.match(/(?:\d{1,3}(\.\d+)?)/g)){
if(getMatch.length>3){x=getMatch.pop();}
fixR=this.map(fixR,this.base,function(value,base){  
    var len=value.length,curValue=[],intRgb,result; 
    if(len!==3){return;};
        for(;i<len;i++){
        intRgb=(+value[i]).toString(this.base);
    if(intRgb.length<2){
//不足位数的用0补位;
        intRgb="0"+intRgb;
        }
        curValue[curValue.length]=intRgb;
        }
  return result=curValue;
  });
  };
return getMatch=(plainStr?getMatch.join(""):"#"+getMatch.join("")).toUpperCase();
},
RgbToHex使用方法:
var testHtoR=tranHR.RgbToHex("rgba(255,210,203,0.6)",false);
var testHtoR1=tranHR.RgbToHex("203,52,16",false);
var testHtoR2=tranHR.RgbToHex("rgb(45,96,255)",true);
第二个参数表示是否返回带'#'或者不带;

最后是上面2个方法要使用到的一些方法:

var tranHR={
    base:16,
    toString:Object.prototype.toString,
    map:function(array,base,callback){
var len=array.length||0,i=0,arr="",value=[];
if(this.toString.call(array).toLowerCase().indexOf("array")>-1){
        value=callback.call(this,array,base);
        }

return value;
},
toParseInt:function(value,base){
return parseInt(value,base);
}
最后,介绍一种快速把RGB转换为HEX的方法:
function rgb2hex(r,g,b){
return '#'+(1<<24|r<<16|g<<8|b).toString(16).substring(1);
}
相关阅读 更多 +
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载