javascript实现 color颜色格式转换【 rgb和十六进制的转换】

 

  先插入一条广告,博主经营一家发饰淘宝店,都是纯手工制作哦,开业冲钻,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!
店名:
  小鱼尼莫手工饰品店
经营:
  发饰、头花、发夹、耳环等(手工制作)
网店:
  http://shop117066935.taobao.com/

马上开始正题...

 

  以原型的方式,给string字符串类型添加方法,用于实现颜色值格式的转换;不习惯使用原型方法的,只要借鉴实现方法就好!

代码如下:

var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
/*RGB颜色转换为16进制*/
String.prototype.colorHex = function(){
     var that = this;
     if(/^(rgb|RGB)/.test(that)){
          var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
          var strHex = "#";
          for(var i=0; i<aColor.length; i++){
               var hex = Number(aColor[i]).toString(16);
               if(hex === "0"){
                    hex += hex;
               }
               strHex += hex;
          }
          if(strHex.length !== 7){
               strHex = that;
          }
          return strHex;
     }else if(reg.test(that)){
          var aNum = that.replace(/#/,"").split("");
          if(aNum.length === 6){
               return that;
          }else if(aNum.length === 3){
               var numHex = "#";
               for(var i=0; i<aNum.length; i+=1){
                    numHex += (aNum[i]+aNum[i]);
               }
               return numHex;
          }
     }else{
          return that;
     }
};

//-------------------------------------------------

/*16进制颜色转为RGB格式*/
String.prototype.colorRgb = function(){
     var sColor = this.toLowerCase();
     if(sColor && reg.test(sColor)){
          if(sColor.length === 4){
               var sColorNew = "#";
               for(var i=1; i<4; i+=1){
                    sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
               }
               sColor = sColorNew;
          }
          //处理六位的颜色值
          var sColorChange = [];
          for(var i=1; i<7; i+=2){
               sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
          }
          return "RGB(" + sColorChange.join(",") + ")";
     }else{
          return sColor;
     }
};
function (){
     var sColor = this.toLowerCase();
     if(sColor && reg.test(sColor)){
          if(sColor.length === 4){
               var sColorNew = "#";
               for(var i=1; i<4; i+=1){
                    sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
               }
               sColor = sColorNew;
          }
          //处理六位的颜色值
          var sColorChange = [];
          for(var i=1; i<7; i+=2){
               sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
          }
          return "RGB(" + sColorChange.join(",") + ")";
     }else{
          return sColor;
     }
}

使用方法如下:

"rgb(255,255,255)".colorHex();
//输出: "#ffffff"

"#ffffff".colorRgb();
//输出:"RGB(255,255,255)"

店名:
  小鱼尼莫手工饰品店
经营:
  发饰、头花、发夹、耳环等(手工制作)
网店:
  http://shop117066935.taobao.com/

转载请注明出处:http://www.cnblogs.com/qiongmiaoer/p/4566083.html

时间: 2024-08-22 20:06:53

javascript实现 color颜色格式转换【 rgb和十六进制的转换】的相关文章

微信小程序使用wxs在页面中调用js函数,颜色值格式转换 rgb和十六进制的转换

<wxs module="filter"> var filter = { numberToFix: function (hex) { // 16进制颜色值的正则 // var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; var reg = getRegExp('^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$','g'); console.log(reg); console.log('结束'); // 把颜色值

十六进制颜色转换RGB对照表

十六进制颜色转换RGB对照表 版权声明:本文为博主原创文章,未经博主允许不得转载.

ColorUtil【Color工具类(color整型、rgb数组、16进制互相转换)】

版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 主要用于color整型.rgb数组.16进制互相转换(-12590395 <--> #3FE2C5 <--> [63,226,197]) 效果图 暂不需要 代码分析 color的int类型值转16进制类型值包括两种方案: 方案一:思路:计算&16777215的值,然后通过字符串获取16进制数值. /**Color的Int整型转Color的16进制颜色值[方案一] * colorInt - -12590395 * r

c# color 颜色代码

这篇文章来来源于C# Color Table,这里是我翻译的中文版本,其中已经加上了我的一些理解和注释.翻译这篇文章的原因是我在写C#程序的时候发现,C#自带的颜色种类极多(详见下表),如果没有直观的对照关系的话,很难从那么多的名字中挑选出中意的颜色. 以下的颜色代码取自HTML规范,这些颜色的名称对应于KnownColor的属性.比如,你可以用以下代码来创建一个Color对象: Color c = Color.FromKnownColor(KnownColor.colorname); 所有的c

JavaScript随机生成颜色的方法

JavaScript随机生成颜色的方法 这篇文章主要介绍了JavaScript随机生成颜色的方法的相关资料,非常不错,代码简单易懂,具有参考借鉴价值,需要的朋友可以参考下 废话不多说了直接给大家贴js代码了,具体代码如下所述: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <!DOCTYPE html> <html>

YUV 格式与 RGB 格式的相互转换公式及C++ 代码

YUV 格式与 RGB 格式的相互转换公式 最近在用的一个工业相机,输出的图像格式是 YUY2 格式.而在电脑上显示时需要 RGB 格式,所以就花了些时间在网上查了些相关的资料.说实话,网上关于 YUV 与 RGB 格式变换的文章挺多的,本来不需要我再多写这么一篇.但是网上那些文章中给出了各种各样的变换公式,公式的系数又各不相同,让人看了之后越看越糊涂.其实那些文章的公式基本都是对的,只不过因为作者忘记给出变换公式的定义域与值域,所以给读者使用造成了很大的麻烦. 为此我就写了这篇文章,来梳理一下

YUV格式转换为RGB(基于opencv)

之前写代码过程中需要将YUV格式视频中每帧提取出来,然后保存为图片.网上普遍有两种方法,第一种是通过opencv自带cvCvtColor,但是这种方法有bug,得到的图片会泛白.第二种方法是公式法. 法一:opencv自带cvCvtColor 说明:这种方法会出现图片"泛白",具体原因网上是说cvCvtColor这个函数左右协议不同,不太懂. 代码: void FileWriteFrames(){ char *filename = "E:\\openCV\\zhang\\yu

在线转换网页版操作,CAD转换JPG格式

在线转换网页版操作,CAD转换JPG格式.在日常的CAD相关工作中,为了更好地绘图工作,总是会需要转换CAD图纸的格式.CAD转JPG是最常见的转换操作之一.有时候工作繁忙,使用CAD转换软件来转换可能非常麻烦.其实CAD转JPG可以在线转换,不使用任何CAD转换器也能完成.今天小编就给大家演示一下具体的转换方法.演示步骤如下: 步骤一:在浏览器里搜索迅捷CAD一词,找到网址进入官网界面. 步骤二:在迅捷CAD官网界面,移动光标到在线转换标签上,会看到下拉菜单显示的各种CAD转换按钮,我们点击C

【转】color颜色十六进制编码大全

原文网址:http://blog.csdn.net/coder_pig/article/details/18262105 最近刚开始学web,发现好的颜色搭配可以让自己的网页更加美观, 中午不想做事,就无聊滴花了两个小时测试了所有颜色的编码,总结如下 新手没有什么吊炸天的技术,仅仅是一份辅助的文档,有兴趣的朋友可以收藏下, 开发中对于颜色的设置还是比较使用的, 以下是对color颜色的十六进制的编码的总结,纯手工测试,转载请说明出处 白色 #FFFFFF 象白色 #FFFFF0 亮黄色 #FFF