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.
In the Solution Explorer window, right-click on the References folder for the project and select Add Reference... from the context menu. Browse to the <LEADTOOLS_INSTALLDIR>\Bin\WinRT8_1\ folder (depending on your target platform), and select the following .WINMD files:
Click the Add button and then click OK to add the above references.
In the Solution Explorer window, right-click on the js folder for the project and select Add from the context menu. Then Select Existing Item from the submenu, In the Add Existing Item dialog box. Browse to the LEADTOOLS_INSTALLDIR>\Bin\WinRT8_1\JS\ Folder and select the following .js files:
ltjs.js
ltjs.Controls.js
Open the default.html file and copy the below html code into the editor:
<!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>
Change to default.js in the Solution Explorer and add the following variables to the file:
var _imageViewer = null ;
var _extensions = new Array
(
".jpg",
".png",
".bmp",
".pcx",
".psd",
".cmp",
".tif",
".tiff",
".j2k",
".jbg",
".gif",
".jls",
".jb2",
".dcm",
".dic",
".pdf"
);
Update the 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());
}
};
Add the following functions:
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());
}
Build, and Run the program to test it.
Raster .NET | C API | C++ Class Library | JavaScript HTML5
Document .NET | C API | C++ Class Library | JavaScript HTML5
Medical .NET | C API | C++ Class Library | JavaScript HTML5
Medical Web Viewer .NET