Question

目前我正在使用这个非常简单的代码来解决问题：field.style.backgroundColor="#ffffff";直到现在它对我来说运行良好，但就在最近我注意到在webkit中，十六进制值总是转换为rgb值，如{{ 1}}。通常这不会有问题，但我稍后需要在创建图像的php脚本中使用十六进制值。将它们转换回来只会减慢整个过程。所以我的基本问题是如何避免获取那些烦人的rgb值。

Answer 1

编写自己的转换器实际上是相当简单的，这是一个非常快速的计算，为什么在已经安装了充气轮胎的情况下重新发明轮子？ :)看看colours javascript库。

好的，所以图书馆不是你的东西，这是一个为你做的功能。

var a = "rgb(10, 128, 255)";
var b = "rgb( 10, 128, 255)";
var c = "rgb(10, 128, 255 )";
var d = "rgb ( 10, 128, 255 )";
var e = "RGB ( 10, 128, 255 )";
var f = "rgb(10,128,255)";
var g = "rgb(10, 128,)";

var rgbToHex = (function () {
    var rx = /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i;

    function pad(num) {
        if (num.length === 1) {
            num = "0" + num;
        }

        return num;
    }

    return function (rgb, uppercase) {
        var rxArray = rgb.match(rx),
            hex;

        if (rxArray !== null) {
            hex = pad(parseInt(rxArray[1], 10).toString(16)) + pad(parseInt(rxArray[2], 10).toString(16)) + pad(parseInt(rxArray[3], 10).toString(16));

            if (uppercase === true) {
                hex = hex.toUpperCase();
            }

            return hex;
        }

        return;
    };
}());

console.log(rgbToHex(a));
console.log(rgbToHex(b, true));
console.log(rgbToHex(c));
console.log(rgbToHex(d));
console.log(rgbToHex(e));
console.log(rgbToHex(f));
console.log(rgbToHex(g));

在jsfiddle

上

以下是jsperf s

Answer 2

您可以将值拆分为它的部分，将每个数字转换为十六进制，然后返回一个格式化的字符串，例如：

// convert rgb colour values to hex, e.g. rgb(255, 255, 255) to #ffffff;
function rgbToHex(rgb) {
  var re = /^rgb\(.*\)$/;
  var bits;
  function z(n){return (n<10?'0':'') + n;}

  if (re.test(rgb)) {
    bits = rgb.match(/\d+/g);
    return '#' + z((+bits[0]).toString(16)) + 
                 z((+bits[1]).toString(16)) +
                 z((+bits[2]).toString(16));
  }
  return rgb;
}

alert(rgbToHex('rgb(255, 255, 255)')); // #ffffff   
alert(rgbToHex('rgb(0, 0, 0)')); // #000000
alert(rgbToHex('rgb(100, 230, 90)')); // #64e65a

如果某些浏览器返回“RGB（...）”，您可能需要在测试正则表达式上使用 i 标志。

修改

根据Xotic750的帖子， z 功能应为：

function z(n){return (n.length == 1?'0':'') + n;}

不太严格的正则表达式也适合：

  var re = /^rgb/i;

另一个失败是垃圾进入垃圾箱。可以修改正则表达式以允许“rgb（”，如果需要）中的空格。更新版本为：

function rgbToHex(rgb) {
    var re = /^rgb/i;
    var bits = rgb.match(/\d+/g);;

    function z(n) {
        return (n.length == 1? '0' : '') + n;
    }

    if (re.test(rgb) && bits.length == 3) {
        return '#' + z((+bits[0]).toString(16))
                   + z((+bits[1]).toString(16))
                   + z((+bits[2]).toString(16));
    }
    return rgb;
}

唯一的选择是，如果测试失败，它应该返回原始字符串还是未定义？

Answer 3

难道你不能在PHP中将值解释为十六进制值，甚至不需要转换它吗？实际上我不知道JavaScript会给你带来什么，但如果它只是单值，则用十六进制解释它们并将它们联合起来。

不应该有性能损失。

问候

Javascript自动转换十六进制值

3 个答案:

修改