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,
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.
Dhananjay Kumar 
Leave a comment