How do I adjust the brightness and contrast of an image using a slider?
I have an image and I want to adjust its brightness and contrast using a slider in xaml. I don't know where to start. Any help would be appreciated. I am trying to implement this
public WriteableBitmap ChangeBrightness(WriteableBitmap inputBitmap, double brightnessValue )
{
double Value = brightnessValue;
var inputPixels = inputBitmap.Pixels;
for (int i = 0; i < inputPixels.Length; i++)
{
// Extract color components
var c = inputBitmap.Pixels[i];
var a = (byte)(c >> 24);
var r = (byte)(c >> 16);
var g = (byte)(c >> 8);
var b = (byte)(c);
int ri = r + (int)Value;
int gi = g + (int)Value;
int bi = b + (int)Value;
// Clamp to byte boundaries
r = (byte)(ri > 255 ? 255 : (ri < 0 ? 0 : ri));
g = (byte)(gi > 255 ? 255 : (gi < 0 ? 0 : gi));
b = (byte)(bi > 255 ? 255 : (bi < 0 ? 0 : bi));
inputBitmap.Pixels[i] = (a << 24) | (r << 16) | (g << 8) | b;
}
return inputBitmap;
}
but it's useless I guess and I don't find any useful article for it.
source to share
See formula for brightness adjustment
Using the addition formula, you are missing 2 parts in your program.
Part 1: Create a new rewritable bitmap instead of modifying the input bitmap (revert this new bitmap)
Part 2: You need to keep the original copy of the bitmap (luma is not reversible as above)
Very slow implementation to get you started. Most of this stuff can be found on MSDN if you just take some time to read (this is a habit you need to get into if you want to make programs more advanced than Hello World).
<StackPanel> <Image x:Name="myImage" Stretch="None" Source="Assets/bling.png"/> <Slider x:Name="mySilder" ValueChanged="mySilder_ValueChanged"></Slider> </StackPanel>
// namespaces
using Windows.UI.Xaml.Media.Imaging;
using Windows.Storage;
// our copy of the image
WriteableBitmap copy;
public MainPage()
{
this.InitializeComponent();
}
private async void Page_Loaded(object sender, RoutedEventArgs e)
{
// storage file for the image (load it)
StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/bling.png"));
// create a bitmap image
BitmapImage bi = new BitmapImage();
using (
// Open a stream for the selected file.
Windows.Storage.Streams.IRandomAccessStream fileStream =
await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
// load the image into the BitmapImage
await bi.SetSourceAsync(fileStream);
// create a copy of the image
copy = new WriteableBitmap(bi.PixelWidth, bi.PixelHeight);
// load the image into writeablebitmap copy
fileStream.Seek(0);
await copy.SetSourceAsync(fileStream);
}
}
private WriteableBitmap ChangeBrightness(WriteableBitmap source, byte change_value)
{
WriteableBitmap dest = new WriteableBitmap(source.PixelWidth, source.PixelHeight);
byte[] color = new byte[4];
using (Stream s = source.PixelBuffer.AsStream())
{
using (Stream d = dest.PixelBuffer.AsStream())
{
// read the pixel color
while (s.Read(color, 0, 4) > 0)
{
// color[0] = b
// color[1] = g
// color[2] = r
// color[3] = a
// do the adding algo per byte (skip the alpha)
for (int i = 0; i < 4; i++)
{
if ((int)color[i] + change_value > 255) color[i] = 255; else color[i] = (byte)(color[i] + change_value);
}
// write the new pixel color
d.Write(color, 0, 4);
}
}
}
// return the new bitmap
return dest;
}
private void mySilder_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
if (this.mySilder != null)
{
// deterime the brightness to add
byte value_to_add = (byte)((this.mySilder.Value / this.mySilder.Maximum) * 255);
// get the new bitmap with the new brightness
WriteableBitmap ret = ChangeBrightness(copy, value_to_add);
// set it as the source so we can see the change
this.myImage.Source = ret;
}
}
Code in action
If you are looking for "bling.png" you can find it here: bling.png
source to share
Btw, the correct function to brighten the pre-multiplied images is
public static WriteableBitmap ChangeBrightness(WriteableBitmap source, int increment)
{
var dest = new WriteableBitmap(source.PixelWidth, source.PixelHeight);
byte[] color = new byte[4];
using (var srcBuffer = source.PixelBuffer.AsStream())
using (var dstBuffer = dest.PixelBuffer.AsStream())
{
while (srcBuffer.Read(color, 0, 4) > 0)
{
for (int i = 0; i < 3; i++)
{
var value = (float)color[i];
var alpha = color[3] / (float)255;
value /= alpha;
value += increment;
value *= alpha;
if (value > 255)
{
value = 255;
}
color[i] = (byte)value;
}
dstBuffer.Write(color, 0, 4);
}
}
return dest;
}
source to share
This is the code to adjust the contrast of the Writable Bitmap:
public WriteableBitmap ChangeContrast (WriteableBitmap source, double change_value) {var contrastValue = 1 + change_value / 100; WriteableBitmap dest = new WriteableBitmap (source.PixelWidth, source.PixelHeight); byte [] color = new byte [4];
using (Stream s = source.PixelBuffer.AsStream())
{
using (Stream d = dest.PixelBuffer.AsStream())
{
while (s.Read(color, 0, 4) > 0)
{
for (int i = 0; i < 3; i++)
{
double value = color[i] / (float)255;
value -=0.5;
value *= contrastValue;
value += 0.5;
value *= 255;
if (value > 255)
{
value = 255;
}
if (value < 0)
value = 0;
color[i] = (byte)value;
}
d.Write(color, 0, 4);
}
}
}
return dest;
}
source to share