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 

因为功率的比例是对数，所以用线性滑块很难控制。为了使滑块具有线性感觉，请使用以下指令从滑块中获取数值

对于具有min -100和max 100以及中心0（0无对比度变化）的滑块，使用

获取对比度功率值

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

它不是完美的线性，范围是有限的，但将覆盖大多数需求。

测试图像显示结果。中心底部是原来的。在该段使用规模以上由左到-100，-50，50，100