实现RGB与Hex相互转换
2011-04-08 17:02 Matin 阅读(1873) 评论(0) 编辑 收藏 举报Rgb采用的是10进制的方法,而hex是16进制;2者相互转换的原理就是利用进制的相互转换;现在CSS3中可以采用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",true);
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 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的方法:
var rgbTohex=function(r,g,b){
return '#'+(1<<24|r<<16|g<<8|b).toString(16).substring(1);
}
这两种模式的转换不是什么很难的问题,主要是一些细节的问题注意下,本来想弄一个测试的页面出来,集成为一个类似小工具样的,这样使用起来方便些;但是时间有限,偶然间翻到了一个这样已经集成好了的转换工具,介绍给大家。