Loading and displaying images in WinRT JavaScript (Windows Store)

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.

Start Visual Studio 2012
Choose File --> New Project from the menu.
In the New Project dialog box, choose JavaScript and Windows Store as the project template, and choose Blank App (XAML) in the Templates List.
Type the project name as WinRT LoadDisplay 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.
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:
- 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.Jb2.winmd
- Leadtools.Codecs.Jbg.winmd
- Leadtools.Codecs.Jls.winmd
- Leadtools.Codecs.Jxr.winmd
- Leadtools.Codecs.Jls.winmd
- Leadtools.Codecs.Pcx.winmd
- Leadtools.Codecs.Png.winmd
- Leadtools.Codecs.Psd.winmd
- Leadtools.Codecs.Tif.winmd
- Leadtools.ColorConversion.winmd
- Leadtools.Converters.winmd
- Leadtools.Dicom.winmd
- Leadtools.Dicom.Constants.winmd
- Leadtools.ImageProcessing.Color.winmd
- Leadtools.ImageProcessing.Core
- Leadtools.ImageProcessing.Effects.winmd
- Leadtools.ImageProcessing.Utilities
- Leadtools.Pdf.winmd
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.
Click the Open File button, and select an image.
NOTE: If you encounter an "Invalid File Format" or "Feature Not Supported" exception, please refer to the topic Invalid File Format/Feature Not Supported.

Help Version 19.0.2017.10.27

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

LEADTOOLS Imaging, Medical, and Document

Introduction

Getting Started

LEADTOOLS Software License Agreement

Files to be Included with your Application

Files to be Included with your Java Application