CSS 滤镜对比度如何工作?有公式吗?我想在 javascript 中重现,我需要一个公式。 例如 css filter brightness(2) 取每个像素并乘以 2,但为了对比我不知道 谢谢
最佳答案
乘以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
因为功率的缩放是对数的,所以很难用线性 slider 来控制。要使 slider 具有线性感觉,请使用以下说明从 slider 获取值
对于最小值为 -100、最大值为 100 且中心为 0(0 表示对比度没有变化)的 slider ,使用以下方法获取对比度值
power = Math.pow(((Number(slider.value)* 0.0498) + 5)/5,Math.log2(10));
它不是完全线性的,范围有限但可以满足大多数需求。
测试图像显示结果。中间底部是原来的。使用上面段落中从左到右的 slider 值 -100、-50、50、100 的比例
关于javascript - CSS对比过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42672765/