Capturing and Saving Image Application in Windows 10

Introduction

In this article, we will start with functionality to capture images in a Windows 10 application. For that, we need to add the capability of a Webcam and PicturesLibrary in the Package.appxmanifest file. After adding the capability, we will add a button to capture an image and an Image control to show the captured image. Then we will save the image in the system.

So, add the following code to the XAML file:

<Button Name="Capture" Content="Capture" HorizontalAlignment="Left" Margin="151,300,0,0" VerticalAlignment="Top" Height="81" Width="159" Click="Capture_Click"/>
<Image Name="image" HorizontalAlignment="Left" Height="503" Margin="523,106,0,0" VerticalAlignment="Top" Width="634"/>
<Button x:Name="Save" Content="Save" HorizontalAlignment="Left" Margin="151,477,0,0" VerticalAlignment="Top" Height="81" Width="159" Click="Save_Click"/>

Before adding any code in the Capture_click and Save_Click events, we need to add a few namespaces in the.cs file so that no issues will occur in the code:

using Windows.Media.Capture;
using Windows.UI.Xaml.Media.Imaging;
using System.Collections.Generic;
using Windows.Storage;
using Windows.Storage.Pickers;
using Windows.Storage.Streams;
using Windows.UI.Popups;

Now, we go to the Capture_click event to capture the image using the webcam. But before adding the functionality of capture_click, we need to declare the following variables that will be used throughout the application:

private StorageFile sf;
private IRandomAccessStream rs;

Now, the functionality of this capture_click event is:

private async void Capture_Click(object sender, RoutedEventArgs e)
{
// Using the CameraCaptureUI object to invoke webcam and capture the image.
CameraCaptureUI cc = new CameraCaptureUI();
cc.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Jpeg; // Added support for Jpeg format, you can use any as you like.
cc.PhotoSettings.CroppedAspectRatio = new Size(3, 4);
cc.PhotoSettings.MaxResolution = CameraCaptureUIMaxPhotoResolution.HighestAvailable;
// saving captured file in the StorageFile object, so that it can be later used to save the file in the specified location.
sf = await cc.CaptureFileAsync(CameraCaptureUIMode.Photo);
if (sf != null)
{
BitmapImage bmp = new BitmapImage();
rs = await sf.OpenAsync(FileAccessMode.Read);
bmp.SetSource(rs);
image.Source = bmp;
}
}

We will now add the code for the save_click method that will save the image file to a specific location in the system:

private async void Save_Click(object sender, RoutedEventArgs e)
{
// Adding try catch block in case of occurence of an exception
try
{
// Creating object of FileSavePicker and adding few values to the properties of the object.
FileSavePicker fs = new FileSavePicker();
fs.FileTypeChoices.Add("Image", new List < string > ()
{
".jpeg"
});
fs.DefaultFileExtension = ".jpeg";
fs.SuggestedFileName = "Image" + DateTime.Today.ToString();
fs.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
// Using storagefile object defined earlier in above method to save the file using filesavepicker.
fs.SuggestedSaveFile = sf;
// Saving the file
var s = await fs.PickSaveFileAsync();
if (s != null)
{
using(var dataReader = new DataReader(rs.GetInputStreamAt(0)))
{
await dataReader.LoadAsync((uint) rs.Size);
byte[] buffer = new byte[(int) rs.Size];
dataReader.ReadBytes(buffer);
await FileIO.WriteBytesAsync(s, buffer);
}
}
} catch (Exception ex)
{
var messageDialog = new MessageDialog("Something went wrong.");
await messageDialog.ShowAsync();
}
}

Run the program, and enjoy!

Summary

In this article, we learned about Capturing and Saving Image Application in Windows 10.

9 Comments

Join the conversation! Your thoughts help the community grow.

Santhakumar Munuswamy11y ago
Welcome to C# Corner family
Santhakumar Munuswamy11y ago
Thanks for nice article:)
Sibeesh Venu11y ago
Nice Share
Dinesh Beniwal11y ago
Good start Aditya, Welcome to C# Corner.
Praveen Kumar11y ago
Very nice
Karthikeyan K11y ago
Good one...
Syed Shanu11y ago
Hi, Nice One.One small request is that possibel for you to add the sample Source code zip file and few screens Images.
Pankaj Kumar Choudhary11y ago
Nice Start Sir...........
Mohammed Ibrahim11y ago
nice