Products | Support | Send comments on this topic. | Email a link to this topic. | Back to Introduction | Help Version 18.0.1.22
Loading and displaying images in WinRT JavaScript (Windows Store)
Show in webframe
Take the following steps to start a project and to add some code that will demonstrate loading and displaying an image in a WinRT JavaScript application.
ltjs.js ltjs.Controls.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WinRT_LoadDisplay</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- LoadDisplay references -->
<script src="/js/ltjs.js" ></script>
<script src="/js/ltjs.Controls.js" ></script>
<link href="/css/default.css"rel="stylesheet"/>
<script src="/js/default.js" ></script>
</head>
<body>
<div>
<div>
<button id="openFileButton">Open File</button>
</div>
</div>
<div style="bottom: 1pt; background-color: white; width: 100; height">
<div style="max-width: 800px; width: 100; height; margin: 0px auto; background:gray">
<div id="imageViewerDiv"style="position: relative; width: 100; height; border: 1px; -ms-overflow-style: scrollbar">
</div>
</div>
</div>
<div>
<div> <textarea id="imageInfo" style="background: black; color: white"></textarea>
</div>
</div>
</body>
</html>
var _imageViewer = null ;
var _extensions = new Array
(
".jpg",
".png",
".bmp",
".pcx",
".psd",
".cmp",
".tif",
".tiff",
".j2k",
".jbg",
".gif",
".jls",
".jb2",
".dcm",
".dic",
".pdf"
);
onactivated() function as shown below:
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
Leadtools.RasterSupport.initialize();
createViewer();
document.getElementById("openFileButton").addEventListener("click", loadDisplay, false);
} else {
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
}
};
function loadDisplay() {
// Create a file picker object.
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
openPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
openPicker.ViewMode = Windows.Storage.Pickers.PickerViewMode.List;
// Loop through the LEADTOOLS supported file types and add them to the picker
for (var i = 0; i < _extensions.length; i++) {
openPicker.fileTypeFilter.append(_extensions[i]);
}
// Open the picker for the user to pick a file.
openPicker.pickSingleFileAsync().then(function (file) {
if (!file) {
// The picker was dismissed with no selected file.
return;
}
var codecs = new Leadtools.Codecs.RasterCodecs();
// Create a LEAD stream for the file.
var leadStream = Leadtools.LeadStreamFactory.create(file);
// Load it
codecs.loadAsync(leadStream).then(function (rasterImage) {
var width = rasterImage.width;
var height = rasterImage.height;
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
var imageData = context.createImageData(rasterImage.width, rasterImage.height);
var pixelData = imageData.data;
var srcRect = Leadtools.LeadRectHelper.empty;
var destRect = Leadtools.LeadRectHelper.create(0, 0, rasterImage.width, rasterImage.height);
var properties = new Leadtools.Converters.RasterImageRenderProperties();
var renderBuffer = Leadtools.Converters.RasterRenderBuffer.createFromHtmlImageData(imageData.width, imageData.height, pixelData);
Leadtools.Converters.RasterImageRenderer.render(rasterImage, renderBuffer, srcRect, destRect, properties);
context.putImageData(imageData, 0, 0);
_imageViewer.set_imageUrl(canvas.toDataURL());
document.getElementById("imageInfo").textContent = String.format("Image Name: {0}\n Size: {1} x {2}", file.name, width, height);
}, function (e) {
Windows.UI.Popups.MessageDialog('Image failed to load').showAsync();
});
});
}
function createViewer() {
var createOptions = new ltjs.Controls.ImageViewerCreateOptions('imageViewerDiv', 'myViewer');
_imageViewer = new ltjs.Controls.ImageViewer(createOptions);
_imageViewer.add_imageError(function (sender, e) {
var image = e.get_nativeElementEvent().srcElement;
Windows.UI.Popups.MessageDialog('Cannot open: ' + image.src).showAsync();
});
_imageViewer.set_imageHorizontalAlignment(ltjs.Controls.ControlAlignment.center);
_imageViewer.set_imageVerticalAlignment(ltjs.Controls.ControlAlignment.center);
_imageViewer.set_newImageResetOptions(ltjs.Controls.ImageViewerNewImageResetOptions.scrollOffset | ltjs.Controls.ImageViewerNewImageResetOptions.reverse | ltjs.Controls.ImageViewerNewImageResetOptions.flip | ltjs.Controls.ImageViewerNewImageResetOptions.rotateAngle | ltjs.Controls.ImageViewerNewImageResetOptions.invert | ltjs.Controls.ImageViewerNewImageResetOptions.aspectRatioCorrection);
_imageViewer.set_defaultInteractiveMode(new ltjs.Controls.ImageViewerPanZoomInteractiveMode());
}
Products | Support | Contact Us | Copyright Notices