Skip to content

Instantly share code, notes, and snippets.

@donavon
Last active March 22, 2016 06:17
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save donavon/6073319 to your computer and use it in GitHub Desktop.
Save donavon/6073319 to your computer and use it in GitHub Desktop.
`transformImageStream` is a WinJS (Windows 8) utility to transform an image stream. The sample code to get a snapshot from a WebView control requires Windows 8.1.
// Takes a snapshot of WebView control (Windows 8.1) and returns a thumbnail URL.
function getThumbnailFromWebView(webviewControl, width, height) {
return capturePreviewToBlobAsync(webviewControl).then(function (completeEvent) {
var blob = completeEvent.target.result;
var streamIn = blob.msDetachStream();
var Imaging = Windows.Graphics.Imaging;
var transform = new Imaging.BitmapTransform();
transform.scaledHeight = height;
transform.scaledWidth = width;
transform.interpolationMode = Imaging.BitmapInterpolationMode.fant;
return transformImageStream(streamIn, transform).then(function (memoryStream) {
streamIn.close();
blob.msClose();
var imageblob = MSApp.createBlobFromRandomAccessStream('image/png', memoryStream);
return URL.createObjectURL(imageblob);
});
});
}
// wrap `webviewControl.capturePreviewToBlobAsync` in a promise helper function.
function capturePreviewToBlobAsync(webviewControl) {
return new WinJS.Promise(function (complete, error) {
var captureOperation = webviewControl.capturePreviewToBlobAsync();
captureOperation.oncomplete = function (args) {
complete(args);
};
captureOperation.onerror = function (e) {
error(e);
};
captureOperation.start();
});
}
// Here is where the magic happens.
// Takes an image stream and transforms it into another image stream.
// Uses? Create a thumbnail of an image, flip an image, grab just a section of an image.
// Use the output imgage stream to create a data URL, upload to a server, or write the image to disk.
function transformImageStream(streamIn, transform, encoderId) {
var Imaging = Windows.Graphics.Imaging;
encoderId = encoderId || Imaging.BitmapEncoder.pngEncoderId;
var memoryStream = new Windows.Storage.Streams.InMemoryRandomAccessStream();
return Imaging.BitmapDecoder.createAsync(streamIn).then(function (decoder) {
return decoder.getPixelDataAsync(Imaging.BitmapPixelFormat.rgba8, Imaging.BitmapAlphaMode.ignore,
transform, Imaging.ExifOrientationMode.ignoreExifOrientation,
Imaging.ColorManagementMode.doNotColorManage).then(function (pixelDataProvider) {
var pixelData = pixelDataProvider.detachPixelData();
return Imaging.BitmapEncoder.createAsync(encoderId, memoryStream).then(function (encoder) {
encoder.setPixelData(Imaging.BitmapPixelFormat.rgba8, Imaging.BitmapAlphaMode.ignore,
transform.scaledWidth, transform.scaledHeight, decoder.dpiX, decoder.dpiY, pixelData);
return encoder.flushAsync().then(function () {
return memoryStream;
});
});
});
});
}
// Sample code that calls `getThumbnailFromWebView`
// Creates a PNG <img> in the DOM that is proportional to the webview.
var THUMB_HEIGHT = 120;
var scale = THUMB_HEIGHT / webviewControl.offsetHeight;
var width = Math.round(webviewControl.offsetWidth * scale);
var height = THUMB_HEIGHT;
getThumbnailFromWebView(webviewControl, width, height).done(function (thumbUrl) {
var img = document.createElement("img");
img.setAttribute("src", thumbUrl);
img.setAttribute("alt", webviewControl.documentTitle);
thumbs.appendChild(img);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment