Javascript Image Processing-brightness contrast case study _ basic knowledge

In the previous article, we explained the convolution operation and smooth (Fuzzy) Processing in image processing. In this article, we will change the brightness and contrast. For more information, see Preface

Previous ArticleWe have explained the convolution operation and smooth (Fuzzy) Processing in image processing. In this article, we will change the brightness and contrast.

What is brightness?

Brightness is eye-catching ......

In fact, for the color space of RGBA, brightening is actually equal to increasing the R, G, and B channels at the same time, So darkening is equal to decreasing at the same time.

This is easy to understand, because the darker black is RGB (255,255,255, 0), and the brightest white is RGB ). Therefore, the RGB channels must be increased.

What about the contrast?

Contrast is actually a poor color.

For RGBA color space, increasing the contrast is equivalent to multiplying the ratio of R, G, and B at the same time, because the gap between similar colors increases, then, reduce the number by dividing it at the same time.

For example, the difference between RGB (110, 55) and RGB (, 55) is only 10, but after multiplied by 2, it becomes RGB (,) andRGB (66,88, 110)

The difference is 20, that is, the "color difference" is increased.

Linear Model

NewRGB =Contrast* RGB + Brightness

The linear model satisfies the preceding formula.ContrastIndicates the contrast coefficient,BrightnessBrightness coefficient.

Linear Model Implementation is relatively simple, but it is easy to call up all white or all black pictures, for ordinary usersContrast,BrightnessIt is difficult to determine how many options you select.

Therefore, what we use in Photoshop is not a linear model, but a non-linear model.

Non-Linear Model

The Contrast increase in the nonlinear model is related to the Threshold value Threshold:

WhenContrast> = 0:

NewRGB = RGB + (RGB-Threshold) * (1/(1-Contrast/255)-1)

WhenContrast <0:

NewRGB = RGB + (RGB-Threshold) * Contrast/255

So when the contrast and brightness are adjusted at the same time?

If the contrast is greater than 0, adjust the brightness first, and then adjust the contrast. If the contrast is less than 0, adjust the contrast first, and then adjust the brightness.

The last question is what the Threshold value Threshold is. In fact, this is the average gray scale of the image.

Implementation Code

The Code is as follows:

Var brightnessContrast = function (_ src, _ brightness, _ contrast ){
_ Src | error (arguments. callee, IS_UNDEFINED_OR_NULL/* {line }*/);
If (_ src. type = "CV_RGBA "){
Var sData = _ src. data,
Width = _ src. col,
Height = _ src. row,
Dst = new Mat (height, width, CV_RGBA ),
DData = dst. data,
Brightness = Math. max (-255, Math. min (255, _ brightness | 0 )),
Contrast = Math. max (-255, Math. min (255, _ contrast | 0 ));

Var gray = cvtColor (_ src, CV_RGBA2GRAY ),
AllValue = 0,
GData = gray. data;
Var y, x, c;

For (y = height; y --;){
For (x = width; x --;){
AllValue + = gData [y * width + x];
}
}

Var r, g, B, offset, gAverage = (allValue/(height * width) | 0;

For (y = height; y --;){
For (x = width; x --;){
Offset = (y * width + x) * 4;
DData [offset] = sData [offset] + brightness;
DData [offset + 1] = sData [offset + 1] + brightness;
DData [offset + 2] = sData [offset + 2] + brightness;

If (contrast> = 0 ){
For (c = 3; c --;){
If (dData [offset + c]> = gAverage ){
DData [offset + c] = dData [offset + c] + (255-gAverage) * contrast/255;
} Else {
DData [offset + c] = dData [offset + c]-(gAverage * contrast/255 );
}
}
} Else {
DData [offset] = dData [offset] + (dData [offset]-gAverage) * contrast/255;
DData [offset + 1] = dData [offset + 1] + (dData [offset + 1]-gAverage) * contrast/255;
DData [offset + 2] = dData [offset + 2] + (dData [offset + 2]-gAverage) * contrast/255;
}

DData [offset plus 3] = 255;
}
}
} Else {
Error (arguments. callee, UNSPPORT_DATA_TYPE/* {line }*/);
}
Return dst;
};

Effect