In this post we will learn to capture a photo and save the captured photo on the disk. You can work with camera and capture a photo in the WinJS using the Windows.Media.Capture.CameraCaptureUI(). Let us start with creating the UI for the application. In the UI, we will have

  • Application bar with two buttons
  • One button to capture the photo
  • Second button is to save the photo in the Picture Library
  • Image control to preview the capture photo

Let us get it started with creating the UI. The UI mark-up will look like as follows:


<body>

    <div id="application">
        <img id="imgCaptured" />
    </div>

    <div id="AppBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
        <button id="cmdSave" data-win-control="WinJS.UI.AppBarCommand" 
                data-win-options="{id:'cmdSave',label:'Save',icon:'save',section:'global',tooltip:'save'}">
        </button>
        <button id="cmdCamera" data-win-control="WinJS.UI.AppBarCommand" 
                data-win-options="{id:'cmdCamera',label:'Capture Photo',icon:'camera',section:'global',tooltip:'Capture Photo'}">
         </button>
       
    </div>
</body>


On running the application you should have a blank page with the app bar. There are two buttons to capture the photo and to save the captured photo on the disk. On the click event of the cmdCamera button we will capture a photo using following code.

 


function startCamera() {
       
            cam.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(function (file) {
                if (file) {

                    imgCaptured.src = URL.createObjectURL(file)
                    FileToSave = file; 

                } else {
                    
                }
            }, function (err) {
                displayError(err);
            });
       
    }


Globally we have defined three variables as below,

 


     var FileToSave; 
    var cam = new Windows.Media.Capture.CameraCaptureUI();
    var folder = Windows.Storage.KnownFolders.picturesLibrary; 


Attaching click events to both buttons as shown below:

 


args.setPromise(WinJS.UI.processAll());

            document.getElementById("cmdCamera").addEventListener("click", startCamera, false);
            document.getElementById("cmdSave").addEventListener("click", takePhoto, false);

As you see on the cmdCamera button we are calling the startCamera function which is shown above. In this function by using the Media.Capture.CameraCaptureUI capturing the photo and binding that to an image control. On the other hand on the click of cmdSave we are saving the image on the disk.


function takePhoto() {
        
       
        folder.createFileAsync("photo.jpg", Windows.Storage.CreationCollisionOption.replaceExisting)
          .then(function (file) { 
              FileToSave.copyAndReplaceAsync(file);

          });
    }

The captured photo is saved in the picture library using the instance of Windows.Storage.KnownFolders.picturesLibrary. The captured image is saved with the name photo.jpg.

This is all you need to capture an image and save it in the picture library. On running application should look like follows,

image

If you are following along then find application should look like shown above. I have also used CSS to display captured image in the centre. Used CSS is given below:

 


#imgCaptured {
    
    margin-top: 200px;
    margin-left: 100px;
    width:400px;
    height: 400px; 
    margin-right:10px;
 
}

I hope this post is useful. Thanks for reading. Happy coding.

Advertisements

One thought on “Capture photo and save on the disk in WinJS based Windows Store App

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s