Send comments on this topic. | Back to Introduction - All Topics | Help Version 17.5.11.19
Take the following steps to start a project and to add some code that will load and display an image in a Windows Store application using LEADTOOLS WinRT libraries.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Load And Display</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 -->
<link href="/css/default.css"rel="stylesheet"/>
<script src="/js/default.js" ></script>
</head>
<body>
<input id="btnLoad" type="button" value="Load" />
<br />
<div>
<canvas id="outputCanvas" />
</div>
</body>
</html>
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
document.getElementById("btnLoadAndReadBarcodes").addEventListener("click", ReadBarcodes, false);
Leadtools.RasterSupport.initialize(); // replace this with RasterSupport.SetLicense when you have a valid runtime license.
_barcodeEngine = new Leadtools.Barcode.BarcodeEngine();
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
app.start();
function LoadImage() {
// 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.ViewMode = Windows.Storage.Pickers.PickerViewMode.List;
//Add a few supported file types
openPicker.fileTypeFilter.append(".jpg");
openPicker.fileTypeFilter.append(".jpeg");
openPicker.fileTypeFilter.append(".jxr");
openPicker.fileTypeFilter.append(".png");
openPicker.fileTypeFilter.append(".bmp");
openPicker.fileTypeFilter.append(".pcx");
openPicker.fileTypeFilter.append(".tif");
openPicker.fileTypeFilter.append(".tiff");
openPicker.fileTypeFilter.append(".j2k");
openPicker.fileTypeFilter.append(".jbg");
openPicker.fileTypeFilter.append(".gif");
openPicker.fileTypeFilter.append(".jls");
openPicker.fileTypeFilter.append(".jb2");
openPicker.fileTypeFilter.append(".psd");
openPicker.fileTypeFilter.append(".dcm");
openPicker.fileTypeFilter.append(".dic");
openPicker.fileTypeFilter.append(".pdf");
// 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;
}
// Create a RasterCodecs object to load the file
var codecs = new Leadtools.Codecs.RasterCodecs();
// Create a LEAD Stream for the file
var leadStream = Leadtools.LeadStreamFactory.create(file);
// Load it
codecs.options.load.initAlpha = true;
codecs.loadAsync(leadStream, 32, Leadtools.Codecs.CodecsLoadByteOrder.bgr, 1, 1).then(function (rasterImage) {
//Render it to our canvas
//Get the canvas' context
//Create ImageData with size equal to our raster image size
//Use RasterImageRenderer to render the raster image onto the image data
//ImageContext
var imageCanvas = document.createElement("canvas");
var imageContext = document.createElement("2d");
outputCanvas.width = outerWidth;
outputCanvas.height = outerHeight - outputCanvas.offsetTop;
//Check if the image needs to be scaled
var fScale = 1.0;
if (rasterImage.width > outputCanvas.width || rasterImage.height > outputCanvas.height) {
var xScale = outputCanvas.width / rasterImage.width;
var yScale = outputCanvas.height / rasterImage.height;
fScale = (xScale > yScale) ? yScale : xScale;
}
outputContext.scale(fScale, fScale);
outputContext.drawImage(imageCanvas, 0, 0);
}
}, function (e) {
var msg = new Windows.UI.Popups.MessageDialog("Error loading image");
msg.showAsync();
});
});
}
})();