Capturing and Saving Image in Windows 10 App

Generally during application development, developers need to use image capturing feature within their applications just because of the need of an application or as an added feature. As it comes, for the platform like Windows 10 there are few changes in the code syntax which need to be addressed. So this following blog post is about using the new syntax to utilize image capture and save functionality in a Windows 10 app.

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

So, add the following code in the XAML file:

XAML Code

<button name="Capture"></button>

<button></button>

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

Namespaces

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;

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 following variables which will be used throughout the application:

private StorageFile sf;
private IRandomAccessStream rs;

1 2	private StorageFile sf; private IRandomAccessStream rs;

Now, the functionality of this capture_click event is:

Capture Functionality

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;
}
}

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;

}

Now, we will add the code for save_click method, which will save the Image file at particular location in the system:

Save Functionality

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&lt;string&gt;() { ".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();
}
}

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!

XAML Code

Namespaces

Capture Functionality

Save Functionality

Share this: