JavaScript颜色查看器

分享于 

9分钟阅读

Web开发

  繁體 雙語
252 x"alt="屏幕。jpg"src="https://www.codeproject.com/KB/HTML/JavaScriptColorViewer/screen.jpg">

介绍

在 CSS,HTML,WPF XAML以及许多其他文件中,颜色是以下列形式指定的:

  • 颜色 NAME - 像红色
  • '#'后跟 6-bit 十六进制值- 如 #123456
  • '#'后跟 3-bit 十六进制值- #123, 就像那样,通过系统扩展到 #112233
  • RGB颜色- 像 RGB ( 255,0,0 )

我发现很多次,尤其是当我读到其他的代码时,我必须找出这些数字真正代表哪些颜色。 因此,我开发了一个JavaScript颜色查看器,它可以下载并在本地计算机中使用。 也可以在这里找到一个在线版本( )。

Background

颜色由用户动态输入。 程序不知道它将预先做什么。 但是,程序必须为前景文本选取一种颜色。 无论我们选择哪种颜色,它都可以与 background 颜色相同,因这里我们无法看到它。 因此,我们需要使用至少两种对比颜色。 在程序中,我们使用 black 或者白色作为文本颜色。 并使用函数根据它的RGB值计算 background 颜色亮度。 函数基于 ,本文引用了本文

我们还可以显示文本 below的颜色 block,并使用 black 作为唯一的文本颜色。 但我觉得这个程序很无聊。

使用代码

程序有 3个文件,一个HTML文件,一个JavaScript文件和一个CSS文件。 HTML文件很简单,它被列出为 below:

<divid="controls"><span>Color</span><inputtype="text"id="txt"size="30"/><inputtype="button"id="btn"value="Display"/></div><divid="message">Input is invalid!</div><divid="view"></div>

当用户输入无效的颜色时,将显示 " message"" view"是插入颜色块的位置。

JavaScript文件包含以下部分:

  • 两个文本亮度计算函数
  • 文本解析器用于解析输入文本,验证输入文本,并查找RGB通道值
  • 一个显示函数,它将方块插入到 HTML DOM树中

用于计算RGB通道颜色亮度的JavaScript代码是:

function getTextColor2(red, green, blue) {
 var brightness = ((red * 299) + (green * 587) + (blue * 114))/1000;
 if(brightness <125) { //background is darkreturn'white';
 } else {
 return'black';
 }
}

我认为,对于程序员来说,知道这个功能比了解它的工作原理更重要。 但是,如果你确实想知道为什么,请参考前面提到的文章来查看细节。

你还可以通过十六进制值计算亮度:

function getTextColor(hex) {
 if(hex.length == 3) {
 hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
 }
 var red = parseInt(hex.substring(0, 2), 16);
 var green = parseInt(hex.substring(2, 4), 16);
 var blue = parseInt(hex.substring(4, 6), 16);
 return getTextColor2(red, green, blue);
} 

3-bit 十六进制颜色值如 #123 扩展为 #112233. 函数 parseInt 函数可以接受第二个参数,即要分析的数字的基数。 基数可以是 2到 36之间的任意数字。 在我们的例子中,我们使用 16来解析十六进制字符串。

JavaScript具有 substrsubstring 功能。 substr 不在ECMAScript标准中。 所以我们在这里没有用。 然而,大多数浏览器都支持 substr。 这些 2 string 函数的用法是:

  • s.substr(start, length)
  • s.substr(start)//to end
  • s.substring(start, end)//2 indices

区别在于 substr 从索引到了一些长度,而 substring 从索引到索引。 我记得的是 ing"ing dex。

文本解析器使用下面的正则表达式来解析输入。

var regHex6 =/^#?([a-fd]{6})$/;var regHex3 =/^#?([a-fd]{3})$/;var regRgb =/^rgbs*(s*(d{1,3})s*,s*(d{1,3})s*,s*(d{1,3})s*)$/;

对于十六进制输入,起始"#"是可选的,这是一些懒惰的人像我。 d {1,3} 表示数字重复 1,2或者 3时间。

文本解析器还需要一个巨大的字典" standardColors"来检查所有的标准颜色。 这里词典位于JavaScript文件的末尾,不能在这里列出。 分析器将检查颜色是否存在,颜色的十六进制值是什么,这样程序可以计算文本颜色。

文本解析器的代码是 below,它返回一个 2属性的对象。 一个属性 text 将作为前景文本显示。 另一个属性 textColor 是 black 或者白色,从前面提到的亮度函数中计算出来,并将用作文本颜色。 如果没有任何一个 MATCHES,函数将假设输入为颜色 NAME,3 正规表达式 将用于 MATCH 输入。 将检查" standardColors"字典。

function parseInput(text) {
 var textLower = text.trim().toLowerCase();
 var result = textLower.match(regHex6);
 var hex;
 if(result) {
 hex = result[1];
 return {
 text: '#' + hex,
 textColor: getTextColor(hex)
 };
 }
 result = textLower.match(regHex3);
 if(result) {
 hex = result[1];
 return {
 text: '#' + hex,
 textColor: getTextColor(hex)
 };
 }
 result = textLower.match(regRgb);
 if(result) {
 var red = result[1];
 var green = result[2];
 var blue = result[3];
 if(red <256 && green <256 && blue <256) {
 return {
 text: 'RGB(' + red + ', ' + green + ', ' + blue + ')',
 textColor: getTextColor2(red, green, blue)
 };
 }
 }
 hex = standardColors[textLower];
 if(hex) return {
 text: textLower,
 textColor: getTextColor(hex)
 };
 returnnull;
}

finally,用户输入颜色后,下面的函数将颜色 block 插入到 HTML DOM中。

var displayColor = function() {
 var result = parseInput(txt.value);
 if(result) {
 msg.style.display = "none";
 view.innerHTML =
 '<div class="' + result.textColor + '">' +
 '<div class="inner">' +
 '<span>' + result.text + '</span>' +
 '</div>' +
 '</div>' + view.innerHTML;
 view.firstChild.style.backgroundColor = result.text;
 txt.value = "";
 } else {
 msg.style.display = "block";
 }
};

视图 是HTML文件中的一个 <div> 元素。 下面的行将一个新的block 添加到视图中。

view.innerHTML = [something] + view.innerHTML;

将根据CSS文件显示插入的<div> 元素,该文件列出了 below:

#view>div {
 width: 100px;height: 100px;margin: 5px;float: left;display: table;text-align: center;font-weight: bold;font-size: 16px;font-family:"Courier New";}
.white {
 color: white;}
.black {
 color: black;border: 1px solid #eee;}
.inner {
 display: table-cell;vertical-align: middle;}

要垂直居中文本显示,外部 <div> 使用样式 display: table;,而内部 <div> 使用样式 display: table-cell;vertical-align: middle;。 这适用于大多数浏览器。

Points of Interest

displayColor 函数有许多 string 加运算。 在第一个草稿中,我使用了 string 格式函数,这使得代码更加清晰。 它在大多数浏览器中。 然而 IE 不喜欢它的某些未知原因。 这里列出了我的string 格式函数:

String.prototype.format = function() {
 var result = this;
 for(arg in arguments) {
 result = result.replace("{" + arg + "}", arguments[arg]);
 }
 return result;
};

如果你知道为什么这个函数不能在 IE 上工作,请让我知道。

历史记录

  • 第一个版本:2011年05月19日

JAVA  Javascript  COL  VIEW  color  Viewer  
相关文章