Loading and displaying an image in WinRT (Windows Store) (Tutorial II)

Show in webframe

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.

  1. Start Visual Studio 2012
  2. Choose File --> New Project from the menu.
  3. In the New Project dialog box, choose JavaScript and Windows Store as the project template, and choose Blank App in the Templates List.
  4. Type the project name as Load And Display in the Project Name field, and then click OK. If desired, type a new location for your project or select a directory using the Browse button, and then click OK.
  5. 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\WinRT\ folder (depending on your target platform), and select the following .WINMD files:
    • Leadtools.winmd
    • Leadtools.Kernel.winmd
    • Leadtools.Codecs.winmd
    • Leadtools.Codecs.Kernel.winmd
    • Leadtools.Codecs.Bmp.winmd
    • Leadtools.Codecs.Cmp.winmd
    • Leadtools.Codecs.Fax.winmd
    • Leadtools.Codecs.Gif.winmd
    • Leadtools.Codecs.J2k.winmd
    • Leadtools.Codecs.Png.winmd
    • Leadtools.Codecs.Tif.winmd
    • Leadtools.Dicom.winmd
    • Leadtools.Converters.winmd
    • Leadtools.ImageProcessing.Core
    • Leadtools.ImageProcessing.Utilities
    Click the Add button and then click OK to add the above references.
  6. Open the default.html file and copy the below html code into the editor:

     

     

                  <!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> 
                   
    

     

  7. Change to default.js in the Solution Explorer and copy the following code into the file (overwrite all existing code):

     

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

     

  8. Build, and Run the program to test it.
  9. Click the Load button, and select an image.
  10. NOTE: If you encounter an "Invalid File Format" or "Feature Not Supported" exception, please refer to the topic Invalid File Format/Feature Not Supported.

 

 


Products | Support | Contact Us | Copyright Notices
© 2006-2014 All Rights Reserved. LEAD Technologies, Inc.