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

问题描述

正如将图像转换为灰度的公式一样，是否有一个公式可以增加图像的亮度并在同一级别降低亮度?我尝试为每个 r、g 和 b 像素添加一个值.它确实增加了亮度，但是当我降低相同的值时，我不会恢复原来的值.

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;

这会使图像变亮.但是当我从每个像素中减少 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?

更新:

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

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

为了增加亮度:

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;

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

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!

我做错了什么?

推荐答案

在google上快速搜索显示:

A quick search on google showed:

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

链接:

http://www.kweii.com/site/color_theory/2007_LV/亮度计算.pdf

https://web.archive.org/web/20140825114946/http://bobpowell.net/image_contrast.aspx

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

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

另外两个链接:

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

Image Processing Algorithms Part 5: Contrast Adjustment:

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

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

Image Processing Algorithms Part 4: Brightness Adjustment:

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

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

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?

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

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;

然后你给每种颜色加 100，现在你有:

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;

现在你减去同样的 100:

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.

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

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.

因此，您要么在某处保留图像的备份和 brightnesCorrection 值，并且每次更改值时，您都在图像上重新应用校正，或者您只需要接受您将无法执行的事实将图像恢复到昔日的辉煌xD(至少没有这种亮度校正，不确定是否有更好的方法).

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).

希望对你有帮助.

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