文档章节

【原创】Javascript实现Web颜色值转换

Mr.Zheng
 Mr.Zheng
发布于 2015/02/05 12:37
字数 1603
阅读 843
收藏 38

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

先看看问题

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

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

很显然,同一个颜色值,本来应该相等,但结果却并非如此。而这并非个例,笔者在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分支,单从代码量上看,就很明显了吧!接下来,我们看看转换的结果是否如我们所愿的那样,为此我在控制台中执行了下图所示的几行代码:

从执行结果来看,我们的方法似乎已经能够达到我们的目的了。但是,细心的朋友应该注意到了图中有两个红色箭头,这里是不是有什么坑?不错。我们仔细看看第一个箭头中传入的颜色参数 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) + ')'
    };
};

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

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

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

作者博客:百码山庄

© 著作权归作者所有

共有 人打赏支持
Mr.Zheng
粉丝 53
博文 22
码字总数 38792
作品 0
杭州
网页/平面设计
私信 提问
加载中

评论(2)

Tian_Ya
Tian_Ya
very nice。我们不生成代码,我们是代码的搬用工
_小小的等待
_小小的等待
感觉很好,到是我小白,不怎么懂
JavaScript 极致性能追求:TC39 二进制 AST 提案

原文作者:Dylan Schiemann 译者:UC 国际研发 Jothy 写在最前:欢迎你来到“UC国际技术”公众号,我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章,不限于...

UC国际技术
2018/12/11
0
0
使用 HTML5 canvas 绘制精美的图形

本文主要介绍使用一个简单的 HTML 元素 Canvas 来增强您的 web 页面。通过利用其灵活性和多样性吸引访客反复访问您的站点。 HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HT...

IBMdW
2012/02/21
3.1K
4
JavaScriptCore全面解析

本文由云+社区发表 作者:殷源,专注移动客户端开发,微软Imagine Cup中国区特等奖获得者 JavaScript越来越多地出现在我们客户端开发的视野中,从ReactNative到JSpatch,JavaScript与客户端相...

腾讯云加社区
01/22
0
0
开发者必备的 12 个 JavaScript 库

现在 web 设计是最有趣的了,做好 web 设计不仅要熟练使用 Javascript,css 和 html 等,还要有自己的创意设计。为了方便大家发挥自己的创意,就产生了很多 JS 框架,Node.js 扩展等等。有了...

oschina
2014/01/31
7.4K
10
使用Kotlin:让Android与JS交互的详解

先来说说什么是JS交互: 说的俗一点就是通过我们项目中的控件来调用HTML里的JS代码,也可以通过JS来调用项目中的代码。 Android与JS之间的桥梁就是WebView了,我们是通过WebView来实现他们的...

富江___
2018/06/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 我都想和他们组成一个家庭了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @Sharon啊 :分享王菲的单曲《流年》有生之年狭路相逢终不能幸免,手心突然忽然长出纠缠的曲线。 《流年》- 王菲 手机党少年们想听歌,请使劲...

小小编辑
今天
337
12
CentOS7利用systemctl添加自定义系统服务

CentOS7的服务systemctl脚本存放在:/usr/lib/systemd/,有系统(system)和用户(user)之分,需要开机不登陆就能运行的程序,存在系统服务里,即:/usr/lib/systemd/system目录下. CentOS7的每...

linuxprobe16
今天
1
0
RabbitMQ入门

RabbitMQ是一个由erlang开发的基于AMQP(Advanced Message Queue)协议的开源实现。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面都非常的优秀。是当前最主流的消息中间...

watermelon11
今天
19
0
今天的学习

自动加载:方法一 function __autoload( $className ){在这里,完成加载B这个类文件的工作。}class A{} //这是一个类$a1 = new A(); //这里没有自动加载的发生,因为A这个类...

墨冥
今天
4
0
印刷工艺步骤

印刷厂从收到订单到交付整个流程,一般涉及到以下步骤 1.设计(经过软件如cdr,psd,ai等等设计需要印刷的名片,宣传单,画册等物料); 2.排版拼版(在电脑软件这区域完成); 3.出版、出硫...

focusone
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部