首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >CSS对比度滤镜

CSS对比度滤镜
EN

Stack Overflow用户
提问于 2017-03-08 21:34:39
回答 1查看 332关注 0票数 1

css过滤器对比度是如何工作的?有什么公式吗?我想用javascript重现,我需要一个公式。例如,css滤波器亮度(2)取每个像素并乘以2,但我不知道对比度,谢谢

EN

回答 1

Stack Overflow用户

发布于 2017-03-09 00:02:46

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

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

代码语言:javascript
运行
复制
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};    
}

使用它

代码语言:javascript
运行
复制
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);

论元能力控制着对比度。

代码语言:javascript
运行
复制
power = 1; // no change to the image
0 < power < 1; // reduces contrast
1 < power; // increases contrast

因为功率的缩放是对数的,所以很难用线性滑块来控制。要使滑块具有线性感觉,请使用以下说明从滑块中获取一个值

对于最小-100和最大100且中心为0 (0表示没有对比度变化)的滑块,使用以下命令获取对比度幂值

代码语言:javascript
运行
复制
power = Math.pow(((Number(slider.value)* 0.0498) + 5)/5,Math.log2(10));

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

测试图像显示了结果。居中底部是原始的。使用上面段落中从左到右的比例滑块值-100、-50、50、100

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42672765

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档