Loading and processing bitmaps
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
Here's code that will allow the user to select an image using a FilePicker control, and then load and process it.
Windows 8 provides you with FilePicker controls to allow your users to quickly select files: for example, images.
Note Apps written for Windows Phone 8.1 should use PickSingleFileAndContinue rather than PickSingleFileAsync. Using this API requires some extra steps, see How to continue your Windows Phone app after calling a file picker (Windows Phone Store apps using C#/VB/C++ and XAML).
In this short C# code sample, the user can use the FilePicker control to select an image file and then we'll display it in our app. The only assumption we'll make is that your app already has a XAML <Image> control, and you've named it myImage. Here's the code:
async private void LoadImage()
{
// Load an image
Windows.Storage.Pickers.FileOpenPicker openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
openPicker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;
// Filter to include a sample subset of file types.
openPicker.FileTypeFilter.Clear();
openPicker.FileTypeFilter.Add(".bmp");
openPicker.FileTypeFilter.Add(".png");
openPicker.FileTypeFilter.Add(".jpeg");
openPicker.FileTypeFilter.Add(".jpg");
// Open the file picker.
Windows.Storage.StorageFile file = await openPicker.PickSingleFileAsync();
// file is null if user cancels the file picker.
if (file != null)
{
// Open a stream for the selected file.
Windows.Storage.Streams.IRandomAccessStream fileStream =
await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
// Set the image source to the selected bitmap.
Windows.UI.Xaml.Media.Imaging.BitmapImage bitmapImage =
new Windows.UI.Xaml.Media.Imaging.BitmapImage();
bitmapImage.SetSource(fileStream);
myImage.Source = bitmapImage;
this.DataContext = file;
}
}
Note As this code is using the await keyword to load the file asynchronously, it needs to be in a method declared as async private. For more info, see Quickstart: Calling asynchronous APIs in C# or Visual Basic.
Image processing and bitmaps
Loading and displaying a bitmap is good, processing the bitmap is better. This code follows on from the example above, using the file object to gain access to a stream, and then accessing the raw pixel data of the image. A new WritableBitmap image is created using this raw data, and then the colors are manipulated before it is displayed once more.
Note It is important to add using System.Runtime.InteropServices.WindowsRuntime; or the code will not compile.
// Add: using Windows.UI.Xaml.Media.Imaging;
// Add: using System.Runtime.InteropServices.WindowsRuntime;
int height = bitmapImage.PixelHeight;
int width = bitmapImage.PixelWidth;
using (var stream = await file.OpenReadAsync())
{
WriteableBitmap bitmap = new WriteableBitmap(width, height);
await bitmap.SetSourceAsync(stream);
using (var buffer = bitmap.PixelBuffer.AsStream())
{
Byte[] pixels = new Byte[4 * width * height];
buffer.Read(pixels, 0, pixels.Length);
for (int x = 0; x < width; x++)
{
for (int y = 0; y < height; y++)
{
int index = ((y * width) + x) * 4;
Byte b = pixels[index + 0];
Byte g = pixels[index + 1];
Byte r = pixels[index + 2];
Byte a = pixels[index + 3];
// Some simple color manipulation
byte newB = (Byte)((r + g) / 2);
byte newG = (Byte)((r + b) / 2);
byte newR = (Byte)((b + g) / 2);
pixels[index + 0] = newB;
pixels[index + 1] = newG;
pixels[index + 2] = newR;
pixels[index + 3] = a;
}
}
buffer.Position = 0;
buffer.Write(pixels, 0, pixels.Length);
myImage.Source = bitmap;
}
}
Note If you plan on processing the same WriteableBitmap multiple times, make a call to WritableBitmap.Invalidate() each time.
Related topics
Topics for iOS devs
Windows 8 controls for iOS devs
Windows 8 cookbook for iOS devs
File pickers and bitmap topics
Guidelines for file pickers(Windows Store apps)