图像处理 – 在Canvas上调整亮度/对比度的公式?

前端之家收集整理的这篇文章主要介绍了图像处理 – 在Canvas上调整亮度/对比度的公式?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
就像有一个将图像转换为灰度的公式一样,是否有一个公式可以增加图像的亮度并将其降低到相同的水平?我尝试为每个r,g和b像素添加一个值.它确实增加了亮度但是当我减少相同的值时,我没有得到原来的值.
var pixels = context.getImageData(...);

//loop over the pixel data and add a value
p[i] = p[i]+100;
p[i+1] = p[i+1]+100;
p[i+2] = p[i+2]+100;

这使图像变亮.但是当我从每个像素减少100时,我没有得到原始图像.

我在网上看到,有一些公式可以正确计算.有谁能解释一下?同样的对比度和伽玛?

更新:

谢谢大家的建议.经过以下一些帖子后我尝试了这个.

为了增加亮度:

var pixels = context.getImageData(...);

//loop over the pixel data and add a value
p[i] = p[i]+100 < 255 ? p[i]+100 : 255;
p[i+1] = p[i+1]+100 < 255 ? p[i+1]+100 : 255;
p[i+2] = p[i+2]+100 < 255 ? p[i+2]+100 : 255;

并为降低亮度:

var pixels = context.getImageData(...);

//loop over the pixel data and add a value
p[i] = p[i]-100 >= 0 ? p[i]-100 : 0;
p[i+1] = p[i+1]-100 >= 0 ? p[i+1]-100 : 0;
p[i+2] = p[i+2]+100 >= 0 ? p[i+2]-100 : 0;

我可以看到增量工作正常,但是当我递减它时,我仍然没有得到原始图像,原始图像和增亮图像之间有一点差别!

我究竟做错了什么?

解决方法

在谷歌上快速搜索显示

adjust bitmap image brightness/contrast using c++

链接

http://www.kweii.com/site/color_theory/2007_LV/BrightnessCalculation.pdf

http://www.bobpowell.net/image_contrast.htm

在发布一个:)之前,请记住寻找类似的问题.

编辑:

另外两个链接

图像处理算法第5部分:对比度调整:

http://thecryptmag.com/Online/56/imgproc_5.html

图像处理算法第4部分:亮度调整:

http://www.dfstudios.co.uk/articles/image-processing-algorithms-part-4/

编辑:

您发布的第二个代码块中有错误

var pixels = context.getImageData(...);

//loop over the pixel data and add a value
p[i] = p[i]-100 >= 0 ? p[i]-100 : 0;
p[i+1] = p[i+1]-100 >= 0 ? p[i+1]-100 : 0;
p[i+2] = p[i+2]+100 >= 0 ? p[i+2]-100 : 0; // <- Tha p[i+2]+100 should be a p[i+2]-100 right?

Johannes Jendersie说的是真的,你的问题是这样的:

不要说你有一个像这个值的像素

R = 100;
G = 210;
B = 20;

你为每种颜色添加100,现在你有:

R = 200;
G = 255; // It was 310 but you have to clamp it to 255.
B = 120;

现在你减去相同的100:

R = 100; // same
G = 155; // different!,this have to be 210!!
B = 20;  // same

这就是为什么这个操作不可逆转的原因.您可以执行的操作始终是原始图像的副本,每次更改值时,都会应用亮度校正.

因此,撤消添加100的操作的方法不是减去100,而是将亮度校正值设置为0.这是多少图像编辑程序工作,你有一个滑块,当你在滑块窗口改变你可以的值如果将原始图像设置为0,则始终获取原始图像,但一旦“应用”校正,则无法撤消,当您重新打开滑块窗口时,“0”现在是先前已过滤的图像.

所以你要么保留图像的备份和某个地方的brightnesCorrection值,每次值改变时,你都会在图像上重新应用修正,或者你只需​​要接受这样一个事实:你将无法恢复图像到它以前的荣耀xD(至少没有这种亮度校正,不确定是否有更好的方法).

希望能帮助到你.

猜你在找的HTML5相关文章