2

真っ赤な #FF0000 の画像があります。私の目標は、#1100FF に変更することです。

ほんの数週間前、CSS3 に着色/フィルタリング機能があることを知りました。それはかなりうまくいきますが、イメージの最終的な色は #1100FF ではありません。Chromeツール「Awesome Color Picker」で色をチェックしてみた

ですから、私がそれをどのように行うかは、あなたが尋ねなければならないことです.

function RGB_TO_HSV($R, $G, $B)    // RGB values:    0-255, 0-255, 0-255
                    {                                // HSV values:    0-360, 0-100, 0-100
                        $HSL = array();
                        // Convert the RGB byte-values to percentages
                        $R = ($R / 255);
                        $G = ($G / 255);
                        $B = ($B / 255);

                        $maxRGB = max($R, $G, $B);
                        $minRGB = min($R, $G, $B);
                        $chroma = $maxRGB - $minRGB;

                        $computedV = 100 * $maxRGB;

                        if ($chroma == 0)
                        {
                            $HSL['H']= "0deg";
                            $HSL['S']= "0%";
                            $HSL['V']= (3*$computedV)."%";
                            return $HSL;
                        }
                        $computedS = 100 * ($chroma / $maxRGB);

                        if ($R == $minRGB)
                            $h = 3 - (($G - $B) / $chroma);
                        elseif ($B == $minRGB)
                            $h = 1 - (($R - $G) / $chroma);
                        else // $G == $minRGB
                            $h = 5 - (($B - $R) / $chroma);

                        $computedH = 60 * $h;
                        $HSL['H'] = $computedH."deg";
                        $HSL['S'] = $computedS."%";
                        $HSL['V'] = $computedV."%";

                        return $HSL;
                    }

次に、CSS で次のようにします。

img {-webkit-filter: hue-rotate(<?=$HSL['H']?>) saturate(<?=$HSL['S']?>) brightness(<?=$HSL['V']?>);}

必要な色を実現する方法を教えてください。元の色 (例: #FF0000) を加算または減算して目的の色を取得する必要がありますか? または、使用しているコードが正しくありませんか?

出力カラー: #0F2DFF

編集: 画像の色が #FF0000 であるという制限はありません。画像を任意の色に正確に着色できる限り、変更できます。

4

2 に答える 2

0

Webkit または css のバグのようです: https://code.google.com/p/chromium/issues/detail?id=237524 または少なくともその背後にある数学的変換は、色相を直接シフトするほど単純ではありません。これは、次の例で簡単に確認できます。

<div style="width: 200px; height: 100px; color:#333; background-color: hsl(100,100%,50%)">Original</div>
<div style="width: 200px; height: 100px; color:#333; background-color: hsl(200,100%,50%)">Expected</div>
<div style="width: 200px; height: 100px; color:#333; background-color: hsl(100,100%,50%); -webkit-filter: hue-rotate(100deg);">Filtered</div>

ライブデモ

したがって、webkit アルゴリズムのクレイジーなリバース エンジニアリングを行わずに、ある色を別の色に正確に変換することはまだ不可能だと思います。

于 2013-08-21T18:47:31.127 に答える
0

私はヨラムに同意します。期待どおりに機能していません。

私の親友は、CSS シェイプのテクニックでした。私はcssで形を作り、好きなものに色を付けました。それはピクセルパーフェクトでした。時間はかかりますが、それだけの価値があり、フィルタリング技術で時間を無駄にするよりもはるかに効果的でした.

中途半端な基準にはうんざりです。: (

于 2013-08-23T10:43:17.167 に答える