0

画像のRGBピクセルマップを考えると、画像をより赤、緑、青、シアン、マゼンタ、または黄色にするための適切で意味のある値は何でしょうか。

現在、JavaScriptコードには、次のRGB変更値がありますが、色彩理論に基づいてより最適化された比率があるかどうか疑問に思います。たとえば、より多くの赤の場合はrgb（+ 45、-27、-27）を使用しますが、たとえば-27についてはよくわかりません。

var strength = 45;
var strengthLess = strength - 18;
this.changeColorModes = {
        'moreRed'   : {r: strength, g: -strengthLess, b: -strengthLess},
        'moreGreen' : {r: -strengthLess, g: strength, b: -strengthLess},
        'moreBlue'  : {r: -strengthLess, g: -strengthLess, b: strength},
        'moreCyan'  : {r: -strengthLess, g: strengthLess, b: strengthLess},
        'moreMagenta'  : {r: strengthLess, g: -strengthLess, b: strengthLess},
        'moreYellow'  : {r: strengthLess, g: strengthLess, b: -strengthLess}
        };
4

2 に答える 2

0

RGB値の上限は255です。では、この操作を行うと、RGB値（240、10、10）はどうなりますか？それは（285、-35、-35）になり、それから（29、221、221）にオーバーフローしますが、これは確かにあなたが望むものではありません。

この場合、美学と正確に達成したい効果に依存するため、正しい解決策を与えるのは困難です。グラフィックアーティストがPhotoshopなどの画像操作プログラムで画像を色補正する場合、通常、各チャネルの曲線を編集して、多少急勾配にします。これは、そのカラーチャネルの値の乗算操作です。したがって、画像を「20％赤く」したい場合は、すべての赤の値に1.2を掛けて、オーバーフローを避けるためにすべてを255から255に設定します。「シアンが20％少ない」（赤の反対）画像を作成するには、すべての緑と青の値に0.8を掛けます。

于 2012-09-25T08:58:30.500 に答える
0 
var pad = function(num, totalChars) {
    var pad = '0';
    num = num + '';
    while (num.length < totalChars) {
        num = pad + num;
    }
    return num;
};

// Ratio is between 0 and 1
var changeColor = function(color, ratio, darker) {
    // Trim trailing/leading whitespace
    color = color.replace(/^\s*|\s*$/, '');

    // Expand three-digit hex
    color = color.replace(
        /^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i,
        '#$1$1$2$2$3$3'
    );

    // Calculate ratio
    var difference = Math.round(ratio * 256) * (darker ? -1 : 1),
        // Determine if input is RGB(A)
        rgb = color.match(new RegExp('^rgba?\\(\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '\\s*,\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '\\s*,\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '(?:\\s*,\\s*' +
            '(0|1|0?\\.\\d+))?' +
            '\\s*\\)$'
        , 'i')),
        alpha = !!rgb && rgb[4] != null ? rgb[4] : null,

        // Convert hex to decimal
        decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace(
            /^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])/i,
            function() {
                return parseInt(arguments[1], 16) + ',' +
                    parseInt(arguments[2], 16) + ',' +
                    parseInt(arguments[3], 16);
            }
        ).split(/,/),
        returnValue;

    // Return RGB(A)
    return !!rgb ?
        'rgb' + (alpha !== null ? 'a' : '') + '(' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[0], 10) + difference, darker ? 0 : 255
            ) + ', ' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[1], 10) + difference, darker ? 0 : 255
            ) + ', ' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[2], 10) + difference, darker ? 0 : 255
            ) +
            (alpha !== null ? ', ' + alpha : '') +
            ')' :
        // Return hex
        [
            '#',
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[0], 10) + difference, darker ? 0 : 255
            ).toString(16), 2),
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[1], 10) + difference, darker ? 0 : 255
            ).toString(16), 2),
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[2], 10) + difference, darker ? 0 : 255
            ).toString(16), 2)
        ].join('');
};
var lighterColor = function(color, ratio) {
    return changeColor(color, ratio, false);
};
var darkerColor = function(color, ratio) {
    return changeColor(color, ratio, true);
};

// Use
var darker = darkerColor('rgba(80, 75, 52, .5)', .2);
var lighter = lighterColor('rgba(80, 75, 52, .5)', .2);

RGB（A）入力と16進数（3桁または6）を処理するようになりました。

于 2012-09-25T09:01:07.797 に答える