Accessing devices and sensors - Build Windows 8 Apps with HTML5 and JavaScript - page 298

Displaying the captured picture
The following code shows what you need in order to display the captured picture via an IMG element
in the main page of the application.
dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo)
.then(function (file) {
if (file) {
var viewer = document.getElementById("imgPhoto");
viewer.src = URL.createObjectURL(file);
} else {
// No photo captured, but no error returned
}
});
To display a picture in an IMG element—the only known way to display pictures in a WinJS
application—you need a URL to reference; but the captured item is returned to you as the handle
to a Windows 8 storage file. You need to invoke the URL.createObjectURL helper function that was
specifically created to return a usable URL for blobs, media objects, or streams. Figure 12-6 shows the
main interface of the application displaying a captured photo.
FIGURE 12-6 The captured image displayed within the application.
Displaying the captured photo is great, but without some more code, the photo is lost completely
as soon as you exit the application. Next you'll make the application a bit more sophisticated, letting
it save images as well as take them.
Adding the pictures Library capability
A Windows Store application runs in a protected environment, often referred to as a “sandboxed
environment.” That term can mean many things, but for the purposes of this example, it means that
the application is not free to access any physical disk location for reading and/or writing.