Javascript实现Web颜色值转换


Posted in Javascript onFebruary 05, 2015

最近一直忙碌于完成业务需求,好长时间没有写博客了。今天稍微有些时间,翻看了一下最近项目中的一些前端代码,看到Web颜色转换功能的时候,突然想到当我们在做一些颜色设置/编辑的需求时,经常会涉及到各种颜色值格式的互换。于是我决定记录一下我在做这一部分功能的时候是如何实现的,写下来和大家分享一下,希望读者们各抒己见,多多交流。

先看看问题

问题一,当我们在进行网页前端开发的时候,经常会使用 dom.style.backgroundColor = "#f00" 来设置某个 DOM 元素的背景颜色,也会通过类似(为什么是类似?情况比较多,这里可以自由发挥想象) var bgc = dom.style.backgroundColor 的代码来获取某个 DOM 元素的背景颜色。那么问题来了,请看下图:

Javascript实现Web颜色值转换

如果这里的对比还不够明显,我们再继续往下看:

Javascript实现Web颜色值转换

很显然,同一个颜色值,本来应该相等,但结果却并非如此。而这并非个例,笔者在Chrome开发工具和Firefox控制台,得到的结果是一致的。

问题二,前端开发工作,往往是从还原UI设计稿开始。而在编码过程中我们经常会发现这样的设计:某个盒子背景纯色(假设:#f00),但带有 75% 的不透明度。很显然,这种情况我们不能简单的通过 dom.style.backgroundColor = "#f00"来设置,因为达不到半透明的效果。话锋回转,我们知道 CSS3 里面出现了一个 rgba 的东西,也就是说我们可以通过 dom.style.backgroundColor = "rgba(255, 0, 0, 0.75)" 这样来设置带有半透明的背景颜色。那么,问题又来了:这一转换在Photoshop中很容易做到,但若在Javascript中,我们又该如何将(“#f00”, 75)转换成 rgba(255, 0, 0, 0.75) 呢?

接下来,我们一起来看看我是怎么做的。

rgb(a)颜色值转成十六进制颜色(hex)

都是做开发的,咱懂!说啥也不如直接上代码来得痛快,不过这里先放一段最原始的:

<!-- lang: js -->

var rgbToHex = function(rgb) {

    var rRgb = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/,

        rRgba = /rgba\((\d{1,3}),(\d{1,3}),(\d{1,3}),([.\d]+)\)/,

        r, g, b, a, rs = rgb.replace(/\s+/g, "").match(rRgb),

        rsa = rgb.replace(/\s+/g, "").match(rRgba);

    if (rs) {

        r = (+rs[1]).toString(16);

        r = r.length == 1 ? "0" + r : r;

        g = (+rs[2]).toString(16);

        g = g.length == 1 ? "0" + g : g;

        b = (+rs[3]).toString(16);

        b = b.length == 1 ? "0" + b : b;

        return {hex: "#" + r + g + b, alpha: 100};

    } else if (rsa) {

        r = (+rsa[1]).toString(16);

        r = r.length == 1 ? "0" + r : r;

        g = (+rsa[2]).toString(16);

        g = g.length == 1 ? "0" + g : g;

        b = (+rsa[3]).toString(16);

        b = b.length == 1 ? "0" + b : b;

        a = (+rsa[4]) * 100

        return {hex: "#" + r + g + b, alpha: Math.ceil(a)};

    } else {

        return {hex: rgb, alpha: 100};

    }

};

为什么说是最原始的呢?因为在我今天review代码的时候,发现这里还有进化的空间,接下来对比一下进化(优化)后的代码:

<!-- lang: js -->

var rgbToHex = function(rgb) {

        var rRgba = /rgba?\((\d{1,3}),(\d{1,3}),(\d{1,3})(,([.\d]+))?\)/,

        r, g, b, a,

        rsa = rgb.replace(/\s+/g, "").match(rRgba);

    if (rsa) {

        r = (+rsa[1]).toString(16);

        r = r.length == 1 ? "0" + r : r;

        g = (+rsa[2]).toString(16);

        g = g.length == 1 ? "0" + g : g;

        b = (+rsa[3]).toString(16);

        b = b.length == 1 ? "0" + b : b;

        a = (+(rsa[5] ? rsa[5] : 1)) * 100

        return {hex: "#" + r + g + b, alpha: Math.ceil(a)};

    } else {

        return {hex: rgb, alpha: 100};

    }

};

且不说少了一个if分支,单从代码量上看,就很明显了吧!接下来,我们看看转换的结果是否如我们所愿的那样,为此我在控制台中执行了下图所示的几行代码:

Javascript实现Web颜色值转换

从执行结果来看,我们的方法似乎已经能够达到我们的目的了。但是,细心的朋友应该注意到了图中有两个红色箭头,这里是不是有什么坑?不错。我们仔细看看第一个箭头中传入的颜色参数 rgb(255, 0, 0, 2),其实这里并不是一个合法的颜色值,rgb格式的颜色值,是没有第四个(透明度)参数的;再看第二个箭头中 rgba(255, 0, 0, 1.48),这里格式是没问题了,但是透明度却为1.48,其实不是一个合法的透明度值。这两种情况,我们的方法都正常执行了,也正常返回了,说明,我们的方法还有进一步进化的空间,就交给大家自行发挥了!

十六进制颜色(hex)转成rgba格式

在日常开发中,我们最常使用的颜色值应该就是十六进制格式的颜色值了(#ff0000、#f00等),如果我们在使用颜色值的时候需要转换成rgba格式,我们该怎么做呢?

<!-- lang: js -->

var hexToRgba = function(hex, al) {

    var hexColor = /^#/.test(hex) ? hex.slice(1) : hex,

        alp = hex === 'transparent' ? 0 : Math.ceil(al),

        r, g, b;

    hexColor = /^[0-9a-f]{3}|[0-9a-f]{6}$/i.test(hexColor) ? hexColor : 'fffff';

    if (hexColor.length === 3) {

        hexColor = hexColor.replace(/(\w)(\w)(\w)/gi, '$1$1$2$2$3$3');

    }

    r = hexColor.slice(0, 2);

    g = hexColor.slice(2, 4);

    b = hexColor.slice(4, 6);

    r = parseInt(r, 16);

    g = parseInt(g, 16);

    b = parseInt(b, 16);

    return {

        hex: '#' + hexColor,

        alpha: alp,

        rgba: 'rgba(' + r + ', ' + g + ', ' + b + ', ' + (alp / 100).toFixed(2) + ')'

    };

};

同样,我们也写一写验证代码,来测试一下,我们的转换是否正常:

Javascript实现Web颜色值转换

从执行结果来看,我们的方法,没有问题了,都能拿到我们想要的转换结果。但这里依然留给了大家两个红色箭头,非法的透明度和非法的颜色值。这部分进化功能也留给大家了,哈哈…

最后,网页颜色值之间的相互转换,其实是一个老生常谈的问题,我这里也只是简单的列出了一种,相信还有更多更好的方法可以使用,欢迎大家提出来,大家交流,共同进步~~

Javascript 相关文章推荐
jQuery中DOM操作实例分析
Jan 23 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
bootstrap响应式表格实例详解
May 15 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
JS表的模拟方法
Feb 05 #Javascript
JS的数组迭代方法
Feb 05 #Javascript
js实现照片墙功能实例
Feb 05 #Javascript
js实现仿百度瀑布流的方法
Feb 05 #Javascript
JS函数this的用法实例分析
Feb 05 #Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 #Javascript
js关于命名空间的函数实例
Feb 05 #Javascript
You might like
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
Js sort排序使用方法
2011/10/17 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
jsTree使用记录实例
2016/12/01 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
python中subprocess批量执行linux命令
2018/04/27 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
Python补齐字符串长度的实例
2018/11/15 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
Python双链表原理与实现方法详解
2020/02/22 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
餐厅执行经理岗位职责范本
2014/02/26 职场文书
委托书如何写
2014/08/30 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书