2

私はcssスタイルシート全体をカラー値からそれぞれのグレースケール値に変換する方法を探していましたが、（Photoshopを開いて難しい方法を除いて）良い方法を見つけることができませんでした。

これを行う方法はありますか？それを実行できるjQueryスクリプトがあるかどうか誰かが知っていますか？

注：これは、カラー画像をグレースケール画像に変換することについての質問ではありません。これは、完全なスタイルシートをグレースケールに変換することについてです。

4

1 に答える 1

6

これは、RGB値を受け取り、彩度の低いRGB値を返すJavascript関数です。

function desaturate(r, g, b) {
    var intensity = 0.3 * r + 0.59 * g + 0.11 * b;
    var k = 1;
    r = Math.floor(intensity * k + r * (1 - k));
    g = Math.floor(intensity * k + g * (1 - k));
    b = Math.floor(intensity * k + b * (1 - k));
    return [r, g, b];
}

また、特定の要素を1回のファウル急降下で彩度を下げたい場合は、次のようにすることができます。

function rgb_to_string(r, g, b) {
    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

function desaturate_element(selector) {
    var fg = $(selector).css('color').match(/\d+/g);
    var bg = $(selector).css('background-color').match(/\d+/g);
    $(selector).css('color', desaturate(fg[0], fg[1], fg[2]));
    $(selector).css('background-color', desaturate(bg[0], bg[1], bg[2]));
}

このJSFiddleで実際の動作を確認してください。これらの彩度低下乗数は、このスレッドから取得されます。

もう1つ、k値は、彩度を下げる量です。1は完全に彩度を下げ、0はまったく彩度を下げません。

于 2012-05-29T19:01:41.577 に答える