This tutorial shows how to load, display, and save images using the LEADTOOLS SDK in an HTML5 JavaScript application.
Overview | |
---|---|
Summary | This tutorial covers how to load, display, and save image in an HTML5 JavaScript application. |
Completion Time | 15 minutes |
Visual Studio Project | Download tutorial project (1 KB) |
Platform | JS Web Application |
IDE | Visual Studio Code - Client |
Development License | Download LEADTOOLS |
Try it in another language |
|
Before working on the Display Images in an Image Viewer - HTML5 JavaScript tutorial, get familiar with the basic steps of creating a project by reviewing the Add References and Set a License - HTML5 JavaScript tutorial.
This tutorial makes use of http-server
, a console command for running a static file server. To install http-server
first install Node.js
and then install http-server
.
Create a project folder that contains the following:
index.html
fileapp.js
filelib
folderLEADTOOLS
folderThe references needed depend upon the purpose of the project. This tutorial requires the following JS files:
They can be found here: <INSTALL_DIR>\LEADTOOLS21\Bin\JS
Leadtools.js
Leadtools.Controls.js
Make sure to copy both files to the lib
folder and to import them in the index.html
file.
The License unlocks the features needed for the project. It must be set before any toolkit function is called. For details including tutorials for different platforms, refer to Setting a Runtime License.
There are two types of runtime licenses:
Note
Adding LEADTOOLS references and setting a license are covered in more detail in the Add References and Set a License - HTML5 JavaScript tutorial.
Open your projects index.html
file. Add the below code to import the LEADTOOLS dependencies, LEADTOOLS logic, and set the container for the ImageViewer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LEADTOOLS Demo</title>
<!--Import LEADTOOLS Dependencies-->
<script type="text/javascript" src="./lib/Leadtools.js"></script>
<script type="text/javascript" src="./lib/Leadtools.Controls.js"></script>
<!--Import Project Dependencies-->
<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>
<h3>Click and drag to pan, CTRL-Click and drag to zoom in and out</h3>
<input id="fileInput" type="file" accept="image/png, image/jpeg" />
<button id="downloadButton">Save Image</button>
</body>
</html>
Open your app.js
file. Input the code below to create the ImageViewer, load in a sample PNG file, and then export it:
window.onload = function () {
var licenseUrl = "./LEADTOOLS/LEADTOOLS.lic.txt";
var developerKey = "REPLACE_WITH_KEY_CONTENTS";
lt.RasterSupport.setLicenseUri(licenseUrl, developerKey, function (
setLicenseResult
) {
// Check the status of the license
if (setLicenseResult.result) {
console.log("LEADTOOLS client license set successfully");
} else {
var msg = "LEADTOOLS License is missing, invalid or expired\nError:\n";
console.log(msg);
alert(msg);
}
});
// Create an image viewer inside the imageViewerDiv element
const imageViewerDiv = document.getElementById("imageViewerDiv");
const createOptions = new lt.Controls.ImageViewerCreateOptions(
imageViewerDiv
);
this.imageViewer = new lt.Controls.ImageViewer(createOptions);
this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center;
this.imageViewer.viewHorizontalAlignment =
lt.Controls.ControlAlignment.center;
this.imageViewer.autoCreateCanvas = true;
// Add Pan/Zoom interactive mode
// Click and drag to pan, CTRL-Click and drag to zoom in and out
this.imageViewer.interactiveModes.add(
new lt.Controls.ImageViewerPanZoomInteractiveMode()
);
// Load an image
this.imageViewer.imageUrl =
"https://demo.leadtools.com/images/jpeg/cannon.jpg";
this.imageViewer.zoom(
lt.Controls.ControlSizeMode.fit,
0.9,
this.imageViewer.defaultZoomOrigin
);
//Input a file
const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", (event) => {
//Change the URL of the viewer image to the input file.
if (event.target.files[0] != null)
this.imageViewer.imageUrl = URL.createObjectURL(event.target.files[0]);
});
//Download functionality
const downloadButton = document.getElementById("downloadButton");
downloadButton.addEventListener("click", () => {
var image = new Image();
image.crossOrigin = "anonymous";
image.src = this.imageViewer.imageUrl;
document.body.append(image);
image.onload = () => {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
var blob;
blob = canvas.toDataURL("image/jpeg");
var a = document.createElement("a");
a.href = blob;
a.download = "output.png";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
document.body.removeChild(image);
});
};
Open the command line console, then cd into the root of the project. Use the following command to run a static file server: http-server
The server should start and run on http://localhost:8080
. A message should appear in the console indicating all the ports that the server is available on.
Open your browser and navigate to: http://localhost:8080/index.html
This tutorial showed how to add the necessary references to load, display, and save images. In addition, it showed how to use the ImageViewer
object.