考虑到图片的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}
};
答案 0 :(得分:0)
RGB值上限为255.那么当您执行此操作时,RGB值(240,10,10)会发生什么?它会变成(285,-35,-35)然后溢出到(29,221,221),这肯定不是你想要的。
在这种情况下很难给出正确的解决方案,因为它取决于美学以及您想要达到的效果。当图形艺术家在像Photoshop这样的图像处理程序中对图像进行色彩校正时,他们通常会编辑每个通道的曲线并使它们或多或少陡峭,这是对该颜色通道值的乘法运算。因此,当你想要使图像“红色增加20%”时,我会将所有红色值乘以1.2并将所有值设置为255到255以避免溢出。为了使图像“青色减少20%”(与红色相反),我将所有绿色和蓝色值乘以0.8。
答案 1 :(得分: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)输入,以及十六进制(3位或6位)。