Javascript Image Processing—Brightness and Contrast Application Case

Javascript Image Processing—Brightness and Contrast Application Case_Basic Knowledge

WBOY

Release： 2016-05-16 17:44:34

Original

1757 people have browsed it

Foreword

In the previous article , we explained the convolution operation and smoothing (that is, blur) processing in image processing. In this article we change the brightness and contrast.

Actually, what is brightness?

The brightness is quite eye-catching...

In fact, for the RGBA color space, brightening actually means increasing the three channels of R, G, and B at the same time, so darkening means decreasing at the same time.

This is easier to understand, because the darkest black is RGB(0,0,0), and the brightest white is RGB(255,255,255). Therefore, when brightening, each RGB channel should be increased.

So, what about contrast?

Contrast is actually a difference in color.

So for the RGBA color space, increasing the contrast is actually equal to multiplying the three channels of R, G, and B by a ratio at the same time, because in this way the gap between similar colors becomes larger, so reducing it means dividing by Yes.

For example, the original difference between RGB(23,44,55) and RGB(33,44,55) is only 10, but after multiplying by 2, it becomes RGB(46,88,110) and RGB(66,88,110)

, the difference becomes 20, that is, the "color difference" becomes larger.

Linear Model

newRGB = Contrast * RGB Brightness

The linear model satisfies the above formula, where Contrast represents the contrast coefficient, and Brightness represents the brightness coefficient.

The linear model is relatively simple to implement, but it is easy to adjust all-white or all-black pictures. For ordinary users, it is difficult to choose which one is better for Contrast and Brightness Sure.

So, what is actually used in Photoshop is not a linear model, but a nonlinear model.

Nonlinear model

The contrast increase in the nonlinear model is related to the threshold Threshold:

When Contrast >= 0:

newRGB = RGB (RGB - Threshold) * (1 / (1 - Contrast / 255) - 1)

When Contrast < 0:

newRGB = RGB (RGB - Threshold) * Contrast / 255

What about when contrast and brightness are adjusted at the same time?

If the contrast is greater than 0, adjust the brightness first, then adjust the contrast; when the contrast is less than 0, the opposite is true, adjust the contrast first, then adjust the brightness.

The last question is, what exactly is the threshold Threshold? In fact, this is the average gray level of the image.

Implementation code

Copy code The code is as follows: