在Canvas上调整亮度/对比度的公式？ [英] Formula for adjusting brightness/contrast on Canvas?

问题描述

正如有一个将图像转换为灰度的公式，是否有一个公式可以增加图像的亮度并将其降低到相同的水平？我尝试为每个r，g和b像素添加一个值。它确实增加了亮度但是当我减少相同的值时，我没有得到原始值。

  var pixels = context.getImageData（...）; 
 
 //循环像素数据并添加值
 p [i] = p [i] +100; 
 p [i + 1] = p [i + 1] +100; 
 p [i + 2] = p [i + 2] +100; 
  

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

我在网上看到有一些公式可以正确计算。有谁能解释一下？对比度和伽玛类似吗？

更新：

感谢大家的建议。我在浏览了下面的一些帖子后试过这个。

增加亮度：

  var pixels = context.getImageData（...）; 
 
 //循环像素数据并添加值
 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（...）; 
 
 //循环像素数据并添加一个值
 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; 
  

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

我做错了什么？

解决方案

快速搜索谷歌显示：

使用c ++调整位图图像亮度/对比度

链接：

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

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

在发布一个问题之前，请记住寻找类似的问题:)。 / p>

编辑：

另外两个链接：

图像处理算法第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（...）; 
 
 //循环像素数据并添加一个值
 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应该是p [i + 2] -100对吗？ 
  

Johannes Jendersie 说的是真的，你的问题是：

以免你有一个像素值

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

你为每种颜色加100，现在你有：

  R = 200; 
 G = 255; //这是310，但你必须把它夹到255. 
 B = 120; 
  

现在你减去相同的100：

  R = 100; //相同
 G = 155; //不同！，这必须是210 !! 
 B = 20; //相同
  

这就是为什么这个操作不可逆。您可以做的是始终拥有原始图像的副本，每次更改值时，您都应用亮度校正。

所以撤消你的方法添加100的操作不是减去100但是将亮度校正值设置为0.这是多少图像编辑程序工作，你有一个滑块，当你在滑块窗口改变值时，你总是可以得到原始图像你将它设置为0，但是一旦你应用了修正，它就无法撤消，当你重新打开滑块窗口时，0现在是先前过滤的图像。

所以要么保留图像的备份和某处的brightnesCorrection值，每次值改变时，你都会在图像上重新应用修正，或者你只需​​要接受这样的事实：能够将图像恢复到以前的荣耀xD（至少没有这种亮度校正，不确定是否有更好的方法）。

希望它能帮上ps。

Just as there is a formula for converting an image to grayscale, is there a formula for increasing the brightness of an image and decreasing it in the same level? I tried adding a value to each of the r, g and b pixels. It does increase the brightness but when I reduce the same value, I don't get my original value back.

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;

This brightens the image. But when I reduce 100 from every pixel, I don't get my original image back.

I read around the web that there are certain formulas to calculate this properly. Can anyone explain it? And similarly for contrast and gamma?

UPDATE:

Thanks all for the suggestions. I tried this after going through some of the posts below.

For increasing brightness:

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;

And for reducing brightness:

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;

I can see the increment works fine, but when I decrement it, I still don't get the original image, there's a little difference between the original and brightened image!

What am I doing wrong?

解决方案

A quick search on google showed:

adjust bitmap image brightness/contrast using c++

Links:

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

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

remeber to look for similar questions before you post one :).

EDIT:

Two more links:

Image Processing Algorithms Part 5: Contrast Adjustment:

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

Image Processing Algorithms Part 4: Brightness Adjustment:

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

EDIT:

You have an error in the second block of code you posted:

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?

What Johannes Jendersie says is true, your problem is this:

Lest say you have a pixel with this values

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

And you add 100 to each color, now you have:

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

Now you subtract those same 100:

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

That's why this operation is not reversible. What you can do is always have a copy of the original image, and each time you change the value, you re apply the brightness correction.

So the way to undo your operation of adding 100 is not subtracting a 100 but setting the brightness correction value to 0. This is how many image editing program works, you have a slider and while you are at the slider window changing the value you can always get your original image if you set it to 0, but once you "apply" the correction, it can't be undone, when you re open the slider window the "0" is now the image previously filtered.

So you either keep a backup of the image and a brightnesCorrection value somewhere, and each time the value change, you re-apply the correction on the image, or you just have to accept the fact that you won't be able to restore the image to its former glory xD (at least not with this kind of brightness correction, not sure if there is a better way).

Hope it helps.

这篇关于在Canvas上调整亮度/对比度的公式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！