1

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

4

3 回答 3

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

您可能需要在测试正则表达式上添加一个i标志，以防某些浏览器返回“RGB(...)”。

编辑

根据 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;
}

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

于 2013-04-26T22:23:33.827 回答
2

编写自己的转换器实际上相当简单，而且计算速度非常快，既然已经安装了充气轮胎，为什么还要重新发明轮子？:) 看看颜色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的

于 2013-04-26T22:11:09.787 回答
0

难道你不能将值解释为 php 中的十六进制值，甚至不需要转换它吗？实际上我不知道 JavaScript 到底是什么给你的，但如果它只是单个值，则以十六进制解释它们并将它们连接起来。

不应该有性能损失。

问候

于 2013-04-26T21:45:39.993 回答