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(); }); }); } })();