You can get a much nicer image by using a bitmapTransform and the fant interpolation like this:
var transform = new Windows.Graphics.Imaging.BitmapTransform();
// Dimensions are rounded down by BitmapEncoder to the nearest integer.
transform.scaledHeight = decoder.orientedPixelHeight * ScaleFactor;
transform.scaledWidth = decoder.orientedPixelWidth * ScaleFactor;
transform.interpolationMode = Windows.Graphics.Imaging.BitmapInterpolationMode.fant;
I don't believe you can do it all in memory however, you may have to write this to your temp folder and set it to the img.src attribute. Depending on how you get the image you can get the blob from an XHR object, or read the image src attribute and convert
it. Here is a real rough sample, it has some TODOs in it for you.
var theTempFile;
function getTempFile(theExt) {
return Windows.Storage.ApplicationData.current.temporaryFolder.createFileAsync("dataFile." + theExt, Windows.Storage.CreationCollisionOption.replaceExisting)
.then(function (sampleFile) {
theTempFile = sampleFile.name;
return sampleFile;
});
}
function resizeImage(event){
// Keep data in-scope across multiple asynchronous methods.
var inputStream;
var outputStream;
var encoderId;
var pixels;
var pixelFormat;
var alphaMode;
var dpiX;
var dpiY;
var outputFilename;
var DisplayWidthNonScaled = 0;
var DisplayHeightNonScaled = 0;
var ScaleFactor = .25; //TODO amount to scale by
//get a stream from the source image
var imageSource = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(new Windows.Foundation.Uri(theThumbnail.src));
imageSource.openReadAsync().then(function (stream) {
inputStream = stream;
return Windows.Graphics.Imaging.BitmapDecoder.createAsync(inputStream);
}).then(function (decoder) {
var transform = new Windows.Graphics.Imaging.BitmapTransform();
// Note that we are requesting the oriented pixel dimensions, and not applying
// EXIF orientation in the BitmapTransform. We will request oriented pixel data
// later in the BitmapDecoder.GetPixelDataAsync() call.
// Dimensions are rounded down by BitmapEncoder to the nearest integer.
transform.scaledHeight = decoder.orientedPixelHeight * ScaleFactor;
transform.scaledWidth = decoder.orientedPixelWidth * ScaleFactor;
// not rotating -->> transform.rotation = Helpers.convertToBitmapRotation(UserRotation);
transform.interpolationMode = Windows.Graphics.Imaging.BitmapInterpolationMode.fant;
// The BitmapDecoder indicates what pixel format and alpha mode best match the
// natively stored image data. This can provide a performance and/or quality gain.
pixelFormat = decoder.bitmapPixelFormat;
alphaMode = decoder.bitmapAlphaMode;
dpiX = decoder.dpiX;
dpiY = decoder.dpiY;
DisplayWidthNonScaled = decoder.orientedPixelWidth;
DisplayHeightNonScaled = decoder.orientedPixelHeight;
// Get pixel data from the decoder. We apply the user-requested transforms on the
// decoded pixels to take advantage of potential optimizations in the decoder.
return decoder.getPixelDataAsync(
pixelFormat,
alphaMode,
transform,
Windows.Graphics.Imaging.ExifOrientationMode.respectExifOrientation,
Windows.Graphics.Imaging.ColorManagementMode.colorManageToSRgb
);
}).then(function (pixelProvider) {
pixels = pixelProvider.detachPixelData();
// Now that we have the pixel data, get the destination file
// todo get the type of image from image.src
return getTempFile("png");
}).then(function (file) {
outputFilename = file.name;
switch (file.fileType) {
case ".jpg":
encoderId = Windows.Graphics.Imaging.BitmapEncoder.jpegEncoderId;
break;
case ".bmp":
encoderId = Windows.Graphics.Imaging.BitmapEncoder.bmpEncoderId;
break;
case ".png":
default:
encoderId = Windows.Graphics.Imaging.BitmapEncoder.pngEncoderId;
break;
}
return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
}).then(function (stream) {
outputStream = stream;
// BitmapEncoder expects an empty output stream; the user may have selected a
// pre-existing file.
outputStream.size = 0;
return Windows.Graphics.Imaging.BitmapEncoder.createAsync(encoderId, outputStream);
}).then(function (encoder) {
// Write the pixel data onto the encoder. Note that we can't simply use the
// BitmapTransform.ScaledWidth and ScaledHeight members as the user may have
// requested a rotation (which is applied after scaling).
encoder.setPixelData(
pixelFormat,
alphaMode,
DisplayWidthNonScaled * ScaleFactor,
DisplayHeightNonScaled * ScaleFactor,
dpiX,
dpiY,
pixels
);
return encoder.flushAsync();
}).then(function () {
///WinJS.log("Successfully saved a copy: " + outputFilename, "sample", "status");
}, function (error) {
//WinJS.log("Failed to update file: " + error.message, "sample", "error");
resetSessionState();
resetPersistedState();
}).done(function () {
// Finally, close each stream to release any locks.
inputStream && inputStream.close();
outputStream && outputStream.close();
theThumbnail.src = "ms-appdata:///temp/" + theTempFile;
});
}
-Jeff
Jeff Sanders (MSFT)
