MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

When we click Grayscale we enter the setGrayscale handler where the interesting work happens. We
call StorageFile.openReadAsync to get a stream, call BitmapDecoder.createAsync with that to obtain a
decoder, cache some details from the decoder in a local object (encoding), and call BitmapDecoder.-
getPixelDataAsync and copy those pixels to a canvas (and only three chained async operations here!):
var Imaging = Windows.Graphics.Imaging; //Shortcut
var imageFile;
//Saved from the file picker
var decoder;
//Saved from BitmapDecoder.createAsync
var encoding = {};
//To cache some details from the decoder
function setGrayscale() {
//Decode the image file into pixel data for a canvas
//Get an input stream for the file (StorageFile object saved from opening)
imageFile.openReadAsync().then(function (stream) {
//Create a decoder using static createAsync method and the file stream
return Imaging.BitmapDecoder.createAsync(stream);
}).then(function (decoderArg) {
decoder = decoderArg;
//Configure the decoder if desired. Default is BitmapPixelFormat.rgba8 and
//BitmapAlphaMode.ignore. The parameterized version of getPixelDataAsync can also
//control transform, ExifOrientationMode, and ColorManagementMode if needed.
//Cache these settings for encoding later
encoding.dpiX = decoder.dpiX;
encoding.dpiY = decoder.dpiY;
encoding.pixelFormat = decoder.bitmapPixelFormat;
encoding.alphaMode = decoder.bitmapAlphaMode;
encoding.width = decoder.pixelWidth;
encoding.height = decoder.pixelHeight;
}
return decoder.getPixelDataAsync();
}).done(function (pixelProvider) {
//detachPixelData gets the actual bits (array can't be returned from
//an async operation)
copyGrayscaleToCanvas(pixelProvider.detachPixelData(),
decoder.pixelWidth, decoder.pixelHeight);
});
The decoder’s getPixelDataAsync method comes in two forms. The simple form, shown here,
decodes using defaults. The full-control version lets you specify other parameters, as explained in the
code comments above. A common use of this is doing a transform using a Windows.Graphics.-
Imaging.BitmapTransform object (as mentioned before), which accommodates scaling (with different
interpolation modes), rotation (90-degree increments), cropping, and flipping.
Either way, what you get back from the getPixelDataAsync is not the actual pixel array, because of a
limitation in the WinRT language projection mechanism whereby an asynchronous operation cannot
return an array. Instead, the operation returns a PixelDataProvider object whose singular
super-exciting synchronous method called detachPixelData gives you the array you want. (And that
444