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:
<!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":
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:
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 = "https://demo.leadtools.com/images/png/pngimage.png";
};