Javascript Image Processing-brightness contrast case study _ basic knowledge

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.