Tuesday, 12 March 2013

Pick Image using FileOpenPicker and save it to the local folder

hello guys,

In this tutorial I am going to talk about how to pick an image using pickers and to display it to the image control as well as save it to the local folder.

so lets start it,

Go to visual Studio and create a new project using BlankPage template and name it "ImagesandPickers".

Now go to the Mainpage.xaml and create the required UI

for our Task we need 2 buttons, one to pick and save and other to retrieve the image, and one image control to show our image,

so the following screenshot will show us how the UI looks like.

img1

The xaml code for the above UI is as follows

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Pick and Save" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="248,155,0,0" Click="pickandsave"/>
<Image x:Name="myimg" HorizontalAlignment="Left" Height="337" VerticalAlignment="Top" Width="360" Margin="530,83,0,0"/>
<Button Content="Retrieve" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="248,248,0,0" Width="125" Click="Button_Click_1"/>

</Grid>

now navigate to the pick and save event handler.

once you open the MainPage.xaml.cs file , we need to add few namespaces, they are as follows


using Windows.Storage.Pickers;
using Windows.Storage;
using Windows.Storage.Streams;
using Windows.UI.Xaml.Media.Imaging;


once you are done with adding of the namespaces, write  following code in the pickandsave evnet handler


private async void pickandsave(object sender, RoutedEventArgs e)
{
FileOpenPicker picker = new FileOpenPicker();
picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
picker.FileTypeFilter.Add(".jpg");
picker.ViewMode = PickerViewMode.Thumbnail;
StorageFile file = await picker.PickSingleFileAsync();


if (file != null)
{
// Ensure the stream is disposed once the image is loaded
using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
// Set the image source to the selected bitmap
BitmapImage bitmapImage = new BitmapImage();


await bitmapImage.SetSourceAsync(fileStream);
myimg.Source = bitmapImage;
}


var targetFile = await ApplicationData.Current.LocalFolder.CreateFileAsync("storedpic1.jpg");
if (targetFile != null)
{
await file.MoveAndReplaceAsync(targetFile);
}
}


}

In the above code, first we created a object of FileOpenPicker, this file open picker is used to pick some files from the FileExplorer.

to this picker object we need to give a suggested start location, filter to choose some specific file type, its view mode .

now picking up of files is an asynchronous operation so we need to give async keyword after the access specifier of the method, i.e., after Private.

next we created a storage file and we assigned the picked file the storage file,

next we opened the file and read it into a stream,

this stream we assigned as a source to our image control.

next we created a file inside our local folder and replaced that file with our picked file.

Now in our retrieve button event handler, we retrieve the image file from our own local storage and assign it to a stream,

this stream is set as a source to our image control.

the code for the above description is as follows


private async void Button_Click_1(object sender, RoutedEventArgs e)
{
StorageFile rfile = await ApplicationData.Current.LocalFolder.GetFileAsync("storedpic1.jpg");
using (IRandomAccessStream fileStream = await rfile.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
// Set the image source to the selected bitmap
BitmapImage bitmapImage = new BitmapImage();


await bitmapImage.SetSourceAsync(fileStream);
myimg.Source = bitmapImage;
}


}

 

that is it, you are all done now.

lets see how the output looks like

picker1

 

 

picker2

 

now we picked up a image and saved it and displayed the image, now even if you close the application and reopen it and click on retrieve , the same image will be opened , because  we saved it in our local storage

picker2

 

 

Hope you all liked the post,

subscribe for more tutorials,

thank you

2 comments :

  1. It's amazing to pay a quick visit this website and reading the views of all
    mates about this paragraph, while I am also eager of getting know-how.

    ReplyDelete