image-processing - 在 Canvas 上调整亮度/对比度的公式?

标签 image-processing html5-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 时,我无法恢复原始图像。

我在网上看到有一些公式可以正确计算。谁能解释一下?对比度和 Gamma 也是如此?

更新:

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

为了增加亮度:

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

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

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

编辑:

另外两个链接:

图像处理算法第 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。这就是图像编辑程序的工作量,您有一个 slider ,当您在 slider 窗口中更改值,如果将其设置为 0,则始终可以获得原始图像,但是一旦“应用”校正,就无法撤消,当您重新打开 slider 窗口时,“0”现在是先前过滤的图像。

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

希望对你有帮助。

关于image-processing - 在 Canvas 上调整亮度/对比度的公式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13939520/

相关文章:

matlab - 使用 MATLAB 实现 SIFT 和 SURF 特征提取

javascript - 使用excanvas在 Canvas 上绘制图像

javascript - canvas drawImage 未按照给定大小渲染 img

ios - iOS 上的 Safari 向 DataURL 抛出 SECURITY_ERR : DOM Exception 18 when calling canvas.

opencv - 如何分割书架图像中的单本书

javascript - 如何将图像转换为缓冲区

image-processing - 用于 3D 手势识别的实际特征是什么?

javascript - 使用斐波那契格子在球体上均匀排列点

javascript - 如何使用 html 或 javascript 将光标样式设置为圆圈

visual-c++ - 如何在 CamShift 中平滑跟踪