Capturing and Saving Image Application in Windows 10

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!