MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

function saveGrayscale() {
var picker = new Windows.Storage.Pickers.FileSavePicker();
picker.suggestedStartLocation =
Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
picker.suggestedFileName = imageFile.name + " - grayscale";
picker.fileTypeChoices.insert("PNG file", [".png"]);
var imgData, fileStream = null;
picker.pickSaveFileAsync().then(function (file) {
if (file) {
return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
} else {
return WinJS.Promise.wrapError("No file selected");
}
}).then(function (stream) {
fileStream = stream;
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
return Imaging.BitmapEncoder.createAsync(
Imaging.BitmapEncoder.pngEncoderId, stream);
}).then(function (encoder) {
//Set the pixel data--assume "encoding" object has options from elsewhere.
//Conversion from canvas data to Uint8Array is necessary because the array type
//from the canvas doesn't match what WinRT needs here.
encoder.setPixelData(encoding.pixelFormat, encoding.alphaMode,
encoding.width, encoding.height, encoding.dpiX, encoding.dpiY,
new Uint8Array(imgData.data));
}
//Go do the encoding
return encoder.flushAsync();
}).done(function () {
fileStream.close();
}, function () {
//Empty error handler (do nothing if the user canceled the picker)
});
Note how the BitmapEncoder takes a codec identifier in its first parameter. We’re using pngEncoderId,
which is, as you can see, defined as a static property of the Windows.Graphics.Imaging.BitmapEncoder
class; other values are bmpEncoderId, gifEncoderId, jpegEncoderId, jpegXREncoderId, and
tiffEncoderId. These are the formats supported by the API. You can set additional properties of the
BitmapEncoder before setting pixel data, such as its BitmapTransform, which will then be applied during
encoding.
One gotcha to be aware of here is that the pixel array obtained from a canvas element (a DOM
CanvasPixelArray) is not directly compatible with the WinRT byte array required by the encoder. This
is the reason for the new Uint8Array call down there in the last parameter.
446