Displaying an Image in LEADTOOLS HTML5 / JavaScript

Summary

Take the following steps to display an image in the LEADTOOLS HTML5 Image Viewer:

Create a new html file and name it display.html and copy the below HTML5 template into the file:

JavaScript Example

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
   <meta charset="utf-8" /> 
   <title>LEADTOOLS Demo</title> 
   <!-- LEADTOOLS Libraries --> 
   <script type="text/javascript" src="lib/Leadtools.js"></script> 
   <script type="text/javascript" src="lib/Leadtools.Controls.js"></script> 
   <script type="text/javascript" src="app.js"></script> 
</head> 
<body> 
   <!-- DIV to use as the container for the LEADTOOLS image viewer --> 
   <div id="imageViewerDiv" style="width: 600px; height: 600px; background-color: darkgray"></div> 
</body> 
</html>

Create a folder named lib in the same location as the html and copy the LEADTOOLS JavaScript files to this folder. These files can be found in "<LEADTOOLS_INSTALLDIR>\Bin\JS":

JavaScript

Leadtools.js 
Leadtools.Controls.js

The HTML contain the minimum code required to use the LEADTOOLS JavaScript Image Viewer in your application. Leadtools.js is the kernel of the LEADTOOLS JavaScript support and is required by all other libraries. Leadtools.Controls.js contains the image viewer. Both are added to the head section of the HTML. Next, we created an HTML DIV element to act as the container for the viewer. Next we will create app.js that will contain our JavaScript code to create and use the viewer.

Create a text file called app.js in the same folder as display.html and add the following code to it:

JavaScript Example

window.onload = function () { 
   // Get the container DIV 
   var imageViewerDiv = document.getElementById("imageViewerDiv"); 
   // Create the image viewer inside it 
   var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
   var imageViewer = new lt.Controls.ImageViewer(createOptions); 
   // Add handler to show an alert on errors 
   imageViewer.itemError.add(function (sender, e) { 
      alert("Error loading " + e.data.srcElement.src); 
   }); 
   // Load an image in the viewer 
   imageViewer.imageUrl = "http://demo.leadtools.com/HTML5/images/pngimage.png"; 
};