CSS对比度过滤器

Question

css 过滤器对比度如何工作？有公式吗？我想用 javascript 重现，我需要一个公式。 例如css过滤器亮度（2）取每个像素并乘以2，但对于对比度我不知道 谢谢

Answer 1

乘以 2 是一个对比度过滤器。图像 RGB 值的所有乘法和除法都会影响对比度。

我喜欢使用的函数是指数缓和函数，其中功率控制对比度。

function contrastPixel(r,g,b,power) {
    r /= 255;  // normalize channels
    g /= 255;
    b /= 255;
    var rr = Math.pow(r,power);  // raise each to the power
    var gg = Math.pow(r,power);
    var bb = Math.pow(r,power);
    r = Math.floor((rr / (rr + Math.pow(1 - r, power)))*255);
    g = Math.floor((gg / (gg + Math.pow(1 - g, power)))*255);
    b = Math.floor((bb / (bb + Math.pow(1 - b, power)))*255);
    return {r,g,b};    
}

使用它

var dat = ctx.getPixelData(0,0,100,100);
var data = dat.data;
var i = 0;
while(i < data.length){
    var res = contrastPixel(data[i],data[i+1],data[i+2],power);
    data[i++] = res.r;
    data[i++] = res.g;
    data[i++] = res.b;
    i++;
}
ctx.putImageData(dat,0,0);

论据力量控制对比度。

power = 1; // no change to the image
0 < power < 1; // reduces contrast
1 < power; // increases contrast

由于功率缩放是对数的，因此很难使用线性滑块进行控制。要使滑块具有线性感觉，请使用以下说明从滑块中获取值

对于具有最小值 -100 和最大值 100 和中心 0（0 表示没有对比度变化）的滑块，使用获取对比度功率值

power = Math.pow(((Number(slider.value)* 0.0498) + 5)/5,Math.log2(10));

它不是完全线性的，范围有限，但可以满足大多数需求。

测试图像显示结果。中底为原件。使用上段中从左到右的滑块值 -100、-50、50、100