Javascript 对比度过滤器
css过滤器对比度将如何工作?有公式吗?我想用javascript复制,我需要一个公式。 例如css滤镜亮度(2)取每个像素乘以2,但对于对比度我没有任何想法Javascript 对比度过滤器,javascript,css,canvas,filter,pixel,Javascript,Css,Canvas,Filter,Pixel,css过滤器对比度将如何工作?有公式吗?我想用javascript复制,我需要一个公式。 例如css滤镜亮度(2)取每个像素乘以2,但对于对比度我没有任何想法 谢谢乘以2是一个对比度过滤器。图像RGB值的所有乘法和除法都会影响对比度 function contrastPixel(r,g,b,power) { r /= 255; // normalize channels g /= 255; b /= 255; var rr = Math.pow(r,power)
谢谢乘以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};
}
我喜欢使用的函数是一个指数函数,幂函数控制对比度
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);
它不是完全线性的,范围有限,但可以满足大多数需求
测试图像显示了结果。中间的底部是原始的。使用上面段落中从左到右的比例滑块值-100,-50,50,100
如今,您可以直接在画布上下文中使用CSS过滤器
power = Math.pow(((Number(slider.value)* 0.0498) + 5)/5,Math.log2(10));