0

HTML 5 と JavaScript で開発するゲーム用の png 画像があります。違う色にしたいです。画像には 4 つの異なる色があります。すべての色を他の色にシフトしたい。

例えば
      画像は 4 色
              1.茶色
              2.ライトブラウン
              3.ダークブラウン
              4.ダークダークブラウン
      私はそれを青に変換したいのですが、それはそうあるべきです
              1.ブルー
              2.ライトブルー
              3.ダークブルー
              4.ダークダークブルー

HTML5 キャンバスで色を変更する方法は知っていますが、2 つの最後の 3 つの色が最初の色とどのように関連するのかわかりません。色変換用のグーグルがありますが、何も役に立ちませんでした。

ありがとう。

4

1 に答える 1

3

最良の結果を得るには、色空間を RGB から HSL (または HSV) に変更する必要があります。これにより、色相、彩度、および輝度を操作できます。色相を使用すると、色を別の色に「回転」できます。

次に、変更する色の範囲を定義し、この範囲内の色をターゲットの色にシフトしてから、HSL 値を RGB に戻す必要があります (これは、たとえば Photoshop が使用するものです)。

HSL-HSVの概要
WikiPedia からの画像 (下部のリンクを参照)

RGB から HSL -

/**
 * Converts an HSL color value to RGB. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes h, s, and l are contained in the set [0, 1] and
 * returns r, g, and b in the set [0, 255].
 *
 * @param   Number  h       The hue
 * @param   Number  s       The saturation
 * @param   Number  l       The lightness
 * @return  Array           The RGB representation
 */
function hslToRgb(h, s, l){
    var r, g, b;

    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }
    return [r * 255, g * 255, b * 255];
}

HSL 色空間では、色を「回転」できます。必要なのは、回転させたい色の最大角度、最小角度、彩度、および輝度レベルを見つけて、範囲を見つけることだけです。これはHSLに関連する色が互いに近いため、短い範囲にある茶色のバリエーションを見つけることができます（範囲を定義するには、長方形またはむしろ立方体を使用できます。以下の私のパレットリンクを参照してください考え）。

次に、各ピクセルの HSL 値がその範囲内にあるかどうかを確認し、そうである場合は調整して RGB に変換します。

HSL から RGB -

/**
 * Converts an RGB color value to HSL. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes r, g, and b are contained in the set [0, 255] and
 * returns h, s, and l in the set [0, 1].
 *
 * @param   Number  r       The red color value
 * @param   Number  g       The green color value
 * @param   Number  b       The blue color value
 * @return  Array           The HSL representation
 */
function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return [h, s, l];
}

私は過去に、これらのカラー モデルを使用して色を取得および設定するJavaScript パレット ピッカーを作成しました。これを使用して、変更に使用する範囲を見つけることもできます (もちろん、開始点としては左下隅が適切です)。

基本的に、すべてのピクセルを反復処理し、RGB を HSL/HSV に変換し、それらが範囲内にあるかどうかを確認し、範囲内にあるかどうかを調整し、調整されたピクセルを RGB に変換します。

詳細については、関数の上記のコメント セクションに記載されている記事を参照してください:
http://en.wikipedia.org/wiki/HSL_color_space

于 2013-09-14T15:47:53.833 に答える