1

現在、この非常に単純なコードを使用して問題を抱えています。field.style.backgroundColor="#ffffff";今までは問題なく機能していましたが、最近、webkit では 16 進値が常に のような RGB 値に変換されることに気付きましたrgb(255, 255, 255)。通常は問題にはなりませんが、後で画像を作成する php スクリプトで 16 進値が必要になります。そして、それらを元に戻すと、プロセス全体が遅くなります。したがって、私の本当に基本的な質問は、迷惑な RGB 値を取得しないようにするにはどうすればよいかということです。

4

3 に答える 3

2

値を部分に分割し、各数値を 16 進数に変換してから、フォーマットされた文字列を返すことができます。

// 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;
}

残っている唯一の選択肢は、テストが失敗した場合、元の文字列を返すか、未定義にするかです。

于 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 に答える