从 RGB 颜色中移除 R
Removing R from RGB Color
有没有一种方法可以移除 RGB 像素的 red 通道,从而在生成的图片中显示红色去白不去黑?我需要区分红色和 blue/black 颜色,但在不同的光线下 RGB 值会有所不同。如果我简单地删除 R 通道,较深的红色会变成黑色,我想要相反的结果。
谢谢!
如果我没理解错的话-
您需要将红色通道值归一化,然后将其用作混合值:
mix = R / 255
然后使用混合因子将白色与正常颜色减去红色通道混合:
Original-red White
R' = 0 + 255 * mix
G' = G * (1 - mix) + 255 * mix
B' = B * (1 - mix) + 255 * mix
请注意它会消除黄色和洋红色,当然这些颜色使用红色通道,红色越多,混合的白色就越多。
您应该能够使用 CMYK 颜色模型或两者的组合来解决这个问题,这样您就可以分离出所有主要成分。然后用 f.ex 覆盖混音。来自 CMYK 的 yellow/magenta 个分量。
混合过程应该与描述的相同。
概念演示
var ctx = c.getContext("2d");
var img = new Image;
img.onload = function() {
c.width = img.width;
c.height = img.height;
ctx.drawImage(this, 0, 0);
var idata = ctx.getImageData(0,0,c.width,c.height),
data = idata.data, len = data.length, i, mix;
/* mix = R / 255
R = 0 + 255 * mix
G = G * (1 - mix) + 255 * mix
B = B * (1 - mix) + 255 * mix
*/
for(i = 0; i < len; i+= 4) {
mix = data[i] / 255; // mix using red
data[i ] = 255 * mix; // red channel
data[i+1] = data[i+1] * (1 - mix) + 255 * mix; // green channel
data[i+2] = data[i+2] * (1 - mix) + 255 * mix; // blue channel
}
ctx.putImageData(idata,0,0);
};
img.crossOrigin = "";
img.src = "//i.imgur.com/ptOPQZx.png";
document.body.appendChild(img)
<h4>Red removed + to white</h4><canvas id=c></canvas><h4>Original:</h4>
有没有一种方法可以移除 RGB 像素的 red 通道,从而在生成的图片中显示红色去白不去黑?我需要区分红色和 blue/black 颜色,但在不同的光线下 RGB 值会有所不同。如果我简单地删除 R 通道,较深的红色会变成黑色,我想要相反的结果。
谢谢!
如果我没理解错的话-
您需要将红色通道值归一化,然后将其用作混合值:
mix = R / 255
然后使用混合因子将白色与正常颜色减去红色通道混合:
Original-red White
R' = 0 + 255 * mix
G' = G * (1 - mix) + 255 * mix
B' = B * (1 - mix) + 255 * mix
请注意它会消除黄色和洋红色,当然这些颜色使用红色通道,红色越多,混合的白色就越多。
您应该能够使用 CMYK 颜色模型或两者的组合来解决这个问题,这样您就可以分离出所有主要成分。然后用 f.ex 覆盖混音。来自 CMYK 的 yellow/magenta 个分量。
混合过程应该与描述的相同。
概念演示
var ctx = c.getContext("2d");
var img = new Image;
img.onload = function() {
c.width = img.width;
c.height = img.height;
ctx.drawImage(this, 0, 0);
var idata = ctx.getImageData(0,0,c.width,c.height),
data = idata.data, len = data.length, i, mix;
/* mix = R / 255
R = 0 + 255 * mix
G = G * (1 - mix) + 255 * mix
B = B * (1 - mix) + 255 * mix
*/
for(i = 0; i < len; i+= 4) {
mix = data[i] / 255; // mix using red
data[i ] = 255 * mix; // red channel
data[i+1] = data[i+1] * (1 - mix) + 255 * mix; // green channel
data[i+2] = data[i+2] * (1 - mix) + 255 * mix; // blue channel
}
ctx.putImageData(idata,0,0);
};
img.crossOrigin = "";
img.src = "//i.imgur.com/ptOPQZx.png";
document.body.appendChild(img)
<h4>Red removed + to white</h4><canvas id=c></canvas><h4>Original:</h4>