How to use a slider control to adjust the brightness of a Bitmap?
I'm trying to adjust the RGB values to essentially darken or lighten a picture in my image processor project. It would be nice to incorporate both darken and lighten on one TrackBar control, with the neutral, unchanged image being when the slider is set to 0 in the middle.
However, I'm currently still trying to figure out how to do just one feature, for example, darkening, on one TrackBar.
After putting a TrackBar control (Min 0, Max 10) in my project I use the trackbar_scroll event to detect when the TrackBar is scrolled.
I've also coded it to darken the image by subtracting a certain byte value from RGB of each pixel of the image.
The scrollbar successfully darkens the image when you slide it right, however I want to also un-darken it when you slide the TrackBar to the left back to its original position.
private void trbBrightness_Scroll(object sender, EventArgs e)
{
if (bitmapImage == null) return;
Byte Red, Green, Blue;
int iWidth = 320;
int iHeight = 240;
for (int i = 0; i < iWidth; i++)
{
for (int j = 0; j < iHeight; j++)
{
Color pixel = ImageArray[i, j];
Red = pixel.R;
Green = pixel.G;
Blue = pixel.B;
Color newColor =
Color.FromArgb(255,
Red - Convert.ToByte(Red * (trbBrightness.Value * 0.1)),
Green - Convert.ToByte(Green * (trbBrightness.Value * 0.1)),
Blue - Convert.ToByte(Blue * (trbBrightness.Value * 0.1)));
ImageArray[i, j] = newColor;
Right now it just darkens the image like I want it to, however I expect, when slid left, the slider to basically undo the darkening when you slid it right.
Is there a way to detect when the value of the slider is increasing, do this, and when the slider value is decreasing, do this?
I'm assuming I'd have to somehow store the old trackbar value so I can compare it with the new one?
where can I get:
if (trackbar value is increasing)
{
}
else if (trackbar value is decreasing)
{
}
You just need to keep the original Bitmap safe and apply a ColorMatrix to the original bitmap ImageAttributes when you adjust the values.
Of course, you don't adjust what has already been adjusted, otherwise, you'll never get back to the original Brightness/Contrast values of your source bitmap.
Set the new values to the original Bitmap, then show only the results, preserving the original.
The Contrast component can be set to a range of -1.00f to 2.00f.
When the Contrast values goes below 0, you are inverting the Colors making a negative image. You need to decide if you are allowing this behavior. Otherwise, you can limit the Contrast to a minimum of 0.00f: applied to all color components, generates a gray blob (no contrast at all).
The values of the Brightness component can be set to a range of -1.00f to +1.00f. Above an below you have all-white and all-black results.
Using the identity Matrix as reference:
C = Contrast = 1 : B = Brightness = 0
C, 0, 0, 0, 0 1, 0, 0, 0, 0
0, C, 0, 0, 0 0, 1, 0, 0, 0
0, 0, C, 0, 0 0, 0, 1, 0, 0
0, 0, 0, 1, 0 0, 0, 0, 1, 0
B, B, B, 1, 1 0, 0, 0, 1, 1
(If you are used to the math definition of a Matrix or the way other platforms define it, you may think it's wrong. This is just the way a ColorMatrix is defined in the .Net/GDI dialect).
A sample of the code needed to adjust the Brightness and Contrast of Bitmap, using a ColorMatrix and a standard PictureBox control to present the results.
Sample result:
Procedure:
Assign an Image to a PictureBox control, then assign the same Image to a Bitmap object, here a field named adjustBitmap:
Bitmap adjustBitmap = null;
Somewhere (Form.Load(), maybe), assign an Image to a PicureBox and a copy of the same Image to the adjustBitmap Field, which will preserve the original Image color values.
Note: Dispose() of the adjustBitmap object when the Form closes (Form.FormClosed) event.
Add 2 TrackBar controls, one to adjust the Brightness and one for the Contrast (named trkContrast and trkBrightness here).
The Brigthness trackbar will have: Minimum = -100, Maximum = 100, Value = 0
The Contrast trackbar will have: Minimum = -100, Maximum = 200, Value = 100
Subscribe to and assign to both the same event handler for the Scroll event.
The handler code calls the method responsible for adjusting the Bitmap's Brigthness and Contrast, using the current values of the 2 TrackBar controls and the reference of the original Bitmap:
// Somewhere... assign the Bitmap to be altered to the Field
adjustBitmap = [Some Bitmap];
// Use a copy of the above as the PictureBox image
pictureBox1.Image = [A copy of the above];
private void trackBar_Scroll(object sender, EventArgs e)
{
pictureBox1.Image?.Dispose();
pictureBox1.Image = AdjustBrightnessContrast(adjustBitmap, trkContrast.Value, trkBrightness.Value);
}
The main method convert the int values of the TrackBars to floats in the ranges previously described and assings then to the Matrix array:
The new ColorMatrix is the assigned to an ImageAttribute class, which is used as parameter in the Graphics.DrawImage method overload that accepts an ImageAttribute.
using System.Drawing;
using System.Drawing.Imaging;
public Bitmap AdjustBrightnessContrast(Image image, int contrastValue, int brightnessValue)
{
float brightness = -(brightnessValue / 100.0f);
float contrast = contrastValue / 100.0f;
var bitmap = new Bitmap(image.Width, image.Height, PixelFormat.Format32bppArgb));
using (var g = Graphics.FromImage(bitmap))
using (var attributes = new ImageAttributes())
{
float[][] matrix = {
new float[] { contrast, 0, 0, 0, 0},
new float[] {0, contrast, 0, 0, 0},
new float[] {0, 0, contrast, 0, 0},
new float[] {0, 0, 0, 1, 0},
new float[] {brightness, brightness, brightness, 1, 1}
};
ColorMatrix colorMatrix = new ColorMatrix(matrix);
attributes.SetColorMatrix(colorMatrix);
g.DrawImage(image, new Rectangle(0, 0, bitmap.Width, bitmap.Height),
0, 0, bitmap.Width, bitmap.Height, GraphicsUnit.Pixel, attributes);
return bitmap;
}
}