Introduction
Introduction
Summary
The LEADTOOLS HTML5 and JavaScript SDKs are a powerful collection of JavaScript and Web Services that enable web developers to create zero footprint, cross-platform applications with
document, medical, and raster imaging functionality. Developers can target desktop PCs and mobile devices, such as iPad, iPhone, Android, and more, with a single application featuring robust display and processing,
and support for mouse and multi-touch gestures. For more information, refer to LEADTOOLS HTML5 Browser Support.
Web developers can use LEADTOOLS HTML5 Annotations to provide zero footprint, cross-platform image annotation and markup applications usable on any browser or device that supports HTML5 - including Edge, Firefox, Chrome, iOS, and Android.
The LEADTOOLS HTML5 DICOM Viewer application combines JavaScript libraries and web services to create a zero footprint, platform-independent web application to display DICOM images from any PACS.
This OEM-ready, fully customizable website is perfect for any developer who needs fast, lightweight DICOM viewing without sacrificing any features health care professionals need.
Using the LEADTOOLS LEADVIEW library, you can create a complete, fully-functional Document Viewer application with as few as 3 lines of code. Allows for customized ReactJS UI through a settings dialog or JSON file.
Several LEADTOOLS SDKs offer imaging and recognition functionality in the form of JSON and SOAP/REST Web services that are designed to be easily accessed by any application for a platform-independent solution.
Developers using high level environments such as .NET and Java can utilize the LEADTOOLS SOAP/REST Web Services.
All LEADTOOLS JavaScript libraries include the TypeScript definition files (.d.ts) required to develop HTML5/JavaScript applications using Microsoft TypeScript technology.
Key Features
- HTML5/JavaScript Viewer Control for cross-platform image viewing
- Rendering through an HTMLCanvasElement or actual HTML5 elements
- Mouse and multi-touch (gesture) input
-
Interactive Modes, including:
- Pan
- Scale
- Zoom to Rectangle
- Center at Point
- Magnifying Glass
- Pinch and Zoom
- Drag and Drop
- Built-in image manipulation:
- Rotate
- Flip
- Resize and Scale
- Display based on physical and logical units
- Multiple Image Viewers on a single page
- Use abstracted DocumentViewer controls
- Add the LEADVIEW API to any HTML5/JavaScript project
- Configure files with very little programming
- Customize ReactJS UI
- Customize server and end user administration
- BindingManager provides an API to customize UI components
- HTML5/JavaScript Viewer Control for cross-platform medical image viewing
- Supports mouse and multi-touch (gesture) input
- Cross-platform DICOM image display and processing
- Zero footprint deployment provides fast loading times for low bandwidth clients
- DICOM images anywhere, on your desktop, tablet or mobile device, from your local archive or a remote PACS using DICOM communication
- Web Services for performing query/retrieve and streaming DICOM metadata and image data in any format or compression
- HTML5 Image Annotation and Markup
- Built-in tools for Window Level, Series Stack, image processing and more
- Signed and unsigned display for extended grayscale images typical of medical applications
- Client caching of downloaded image data for fast reloads and network traffic reduction
- Options to manage user authentication, permissions and patients' access rights
- Cross-platform annotations library
- Specialized annotations for document images
- Specialized annotations for medical images
- Annotations can be added to color, bitonal, and grayscale images
- Broad range of image annotation objects including text, geometric shapes, rulers, stamps, and more
- Supports single or multipage image files
- Unlimited undo and redo levels
- Resolution independent annotations will scale with an image when loaded at a different DPI
- Backwards compatible with other LEADTOOLS annotation interfaces
LEADTOOLS JavaScript Object Model
The LEADTOOLS JavaScript libraries use an object model similar to the Microsoft .NET or Java object class library.
The following members are available in each LEADTOOLS type in addition to the other properties and methods described in the members page.
Type refers to the LEADTOOLS type, such as lt.Controls.ImageViewer. All the functions listed below are static methods that must be called directly on the type itself and not an instance of the type.
[Type].registerNamespace(name)
Registers a new LEADTOOLS namespace.
Parameters
name: A string containing the fully qualified name of the namespace. Must not be omitted or null.
Example
Refer to the sample source code at the end of this document.
[Type].registerClass(name, baseType, interfaceType)
Registers a new LEADTOOLS class type.
Parameters
name: String containing the fully qualified type name (namespace.name). Must not be omitted or null.
baseType: Base type. Can be omitted or null if the class does not derive from a LEADTOOLS base class.
interfaceType: Interface type implemented by the class. Can be omitted or null if the class does not implement a LEADTOOLS interface.
Example
Refer to the sample source code at the end of this document.
[Type].registerInterface(name)
Registers a new LEADTOOLS class type.
Parameters
name: String containing the fully qualified namespace name. Must not be omitted or null.
[Type].registerEnum(name, flags)
Registers a new LEADTOOLS enumeration.
Parameters
name: String containing the fully qualified enumeration name. Must not be omitted or null.
flags: true if the members of this enumeration can be OR'ed together; otherwise, false. Treated as false if omitted or null.
[Type].initializeBase(instance, args)
Initializes the base class of a LEADTOOLS derived class from the constructor.
Parameters
instance: The derived class instance. In almost all cases, it can be set to 'this'. Must not be omitted or null.
args: An array containing the arguments to pass to the base class. Can be omitted or null if the base class constructor does not require other arguments.
If you derive a new class from a LEADTOOLS class, then you must call this method in your constructor to initialize the base class.
Example
Refer to the sample source code at the end of this document.
[Type].callBaseMethod(instance, name, args)
Calls a function from the base class of a LEADTOOLS derived class.
Parameters
instance: The derived class instance. In almost all cases, it can be set to 'this'. Must not be omitted or null.
name: String containing the name of the function to call. Must not be omitted or null.
args: An array containing the arguments to pass to the base class method. Can be omitted or null if the base class constructor does not have arguments.
Returns
The return value from the base method (if any).
Example
Refer to the sample source code at the end of this document.
[Type].__baseType
(Property) The base type of this type.
[Type].__typeName
(Property) The full namespace name of this type.
Example
// This will show 'lt.Controls.ImageViewerInteractiveMode' since ImageViewerPanZoomInteractiveMode
// derives from ImageViewerInteractiveMode
alert(lt.Controls.ImageViewerPanZoomInteractiveMode.__baseType.__typeName);
[Type].prototype.isInstanceOfType(instance)
Determines whether the specified object is an instance of this class or one of its derived classes.
Parameters
Instance: the object instance to check.
Returns
True if the specified object is an instance of this class or one of its derived classes; otherwise, false.
Example
var instance = new lt.Controls.ImageViewerPanZoomInteractiveMode();
// This will show true, same type
alert(lt.Controls.ImageViewerPanZoomInteractiveMode.isInstanceOfType(instance));
// This will show true, derived type
alert(lt.Controls.ImageViewerInteractiveMode.isInstanceOfType(instance));
instance = lt.LeadPointD.create(10, 10);
// This will show false
alert(lt.Controls.ImageViewerInteractiveMode.isInstanceOfType(instance));
Full Example
This following example shows how to create a class that derives from ImageViewerInteractiveMode to implement rotation when the user clicks and drags the viewer.
example.html
example.css
example.js
example.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rotate Interactive Mode</title>
<link href="example.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Leadtools.js"></script>
<script type="text/javascript" src="Leadtools.Controls.js"></script>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<div id="controls">
<label for="interactiveModeSelect">Interactive Mode:</label>
<select id="interactiveModeSelect">
<option>PanZoom</option>
<option>Rotate</option>
</select>
</div>
<div id="imageViewer"></div>
<div id="output"></div>
</body>
</html>
example.css
css
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
font-family: helvetica;
}
#imageViewer {
margin: 10px 0;
border: 2px solid #333;
background-color: #eee;
width: 500px;
height: 500px;
}
example.js
"use strict";
// Register the namespace
Type.registerNamespace("demo");
///////////////////////////////////////////////
// RotateInteractiveModeEventArgs
// Data for the custom event
demo.RotateInteractiveModeEventArgs = function (rotateAngle) {
// Call initializeBase - deriving from a LEADTOOLS type (LeadEventArgs) requires it
demo.RotateInteractiveModeEventArgs.initializeBase(this);
this._rotateAngle = rotateAngle;
}
// Define the getter property
Object.defineProperty(demo.RotateInteractiveModeEventArgs.prototype, "rotateAngle", {
get: function () {
return this._rotateAngle;
},
enumerable: true, configurable: true
});
// Register this class
demo.RotateInteractiveModeEventArgs.registerClass("demo.RotateInteractiveModeEventArgs", lt.LeadEventArgs);
///////////////////////////////////////////////
// RotateInteractiveMode
// Class that derives from a LEADTOOLS lt.Controls.ImageViewerInteractiveMode class
demo.RotateInteractiveMode = function () {
demo.RotateInteractiveMode.initializeBase(this);
// Create the event
this._rotate = lt.LeadEvent.create(this, "rotate");
// Event handlers
this._dragStartedHandler = null;
this._dragDeltaHandler = null;
this._dragCompletedHandler = null;
}
demo.RotateInteractiveMode.prototype = {
// We must provide an implementation for name and id
// since they override similar methods of ImageViewerInteractiveMode
get_name: function () {
return "Rotate";
},
get_id: function () {
return 200; // arbitrary
},
// Called when the mode is started
// This is an overridden method
start: function (viewer) {
// Call the base class Start method
demo.RotateInteractiveMode.callBaseMethod(this, "start", [viewer]);
// Subscribe to the dragStarted, dragDelta and dragCompleted events
var service = this.interactiveService;
var _this = this;
this._dragStartedHandler = service.dragStarted.add(function (sender, e) {
_this.dragStarted(sender, e);
});
this._dragDeltaHandler = service.dragDelta.add(function (sender, e) {
_this.dragDelta(sender, e);
});
this._dragCompletedHandler = service.dragCompleted.add(function (sender, e) {
_this.dragCompleted(sender, e);
});
},
// Called when the mode is stopped
stop: function (viewer) {
// Check if we have started
if (this.isStarted) {
// Unsubscribe from the events
var service = this.interactiveService;
service.dragStarted.remove(this._dragStartedHandler);
service.dragDelta.remove(this._dragDeltaHandler);
service.dragCompleted.remove(this._dragCompletedHandler);
// Call the base class Stop method
demo.RotateInteractiveMode.callBaseMethod(this, "stop", [viewer]);
}
},
// Called when the user starts a drag operation
dragStarted: function (sender, e) {
// This will check if the mouse button (if any) is correct and if we are on top of the image
if (this.canStartWork(e)) {
// Inform whomever is listening that we have started working
this.onWorkStarted(lt.LeadEventArgs.empty);
}
},
// Called when the user is dragging
dragDelta: function (sender, e) {
// If we are not working (for example, the
//user has clicked the mouse outside the image) then
// nothing to do
if (!this.isWorking) {
return;
}
// Perform the operation. Get the change of the drag then increase
// or decrease the current rotation angle depending on the direction
var viewer = this.imageViewer;
var change = e.change; // this is a lt.LeadPointD object
var delta = 5;
var oldRotateAngle = viewer.rotateAngle;
if (change.x > 0) {
viewer.rotateAngle = viewer.rotateAngle - delta;
}
else if (change.x < 0) {
viewer.rotateAngle = viewer.rotateAngle + delta;
}
if (viewer.rotateAngle !== oldRotateAngle) {
// The rotate angle has changed, fire our event
this.rotate.invoke(this, new demo.RotateInteractiveModeEventArgs(viewer.rotateAngle));
}
},
// Called when the user stops dragging
dragCompleted: function (sender, e) {
// If we are working, signal completion
if (this.isWorking) {
this.onWorkCompleted(lt.LeadEventArgs.empty);
}
}
};
// Define the properties
Object.defineProperty(demo.RotateInteractiveMode.prototype, "name", { get: demo.RotateInteractiveMode.prototype.get_name, enumerable: true, configurable: true });
Object.defineProperty(demo.RotateInteractiveMode.prototype, "id", { get: demo.RotateInteractiveMode.prototype.get_id, enumerable: true, configurable: true });
Object.defineProperty(demo.RotateInteractiveMode.prototype, "rotate", {
get: function () {
return this._rotate;
},
enumerable: true, configurable: true
});
// Register this class
demo.RotateInteractiveMode.registerClass("demo.RotateInteractiveMode", lt.Controls.ImageViewerInteractiveMode);
///////////////////////////////////////////////
// Startup
document.addEventListener("DOMContentLoaded", function () {
// Create the viewer
var imageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(document.getElementById("imageViewer"));
var viewer = new lt.Controls.ImageViewer(imageViewerCreateOptions);
viewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center;
viewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;
// Create a new instance of the custom interactive mode
var rotateInteractiveMode = new demo.RotateInteractiveMode();
// Subscribe to the custom event
var rotateEventHandler = rotateInteractiveMode.rotate.add(function (sender, e) {
console.log("Rotate angle: " + e.rotateAngle);
});
// Set up interactive modes, pan zoom and the custom rotation mode
var interactiveModes = [
new lt.Controls.ImageViewerPanZoomInteractiveMode(),
rotateInteractiveMode
];
var output = document.getElementById("output");
var interactiveModeSelect = document.getElementById("interactiveModeSelect");
interactiveModeSelect.addEventListener("change", function () {
var newMode = interactiveModes[interactiveModeSelect.selectedIndex];
viewer.defaultInteractiveMode = newMode;
var text = "New Mode: ";
if (demo.RotateInteractiveMode.isInstanceOfType(newMode)) {
text += "Rotate: ";
text += demo.RotateInteractiveMode.__typeName;
}
else if (lt.Controls.ImageViewerPanZoomInteractiveMode.isInstanceOfType(newMode)) {
text += "PanZoom: ";
text += lt.Controls.ImageViewerPanZoomInteractiveMode.__typeName;
}
output.innerHTML += "<p>" + text + "</p>";
}, false);
viewer.defaultInteractiveMode = interactiveModes[0];
// Finally, set an image into the viewer (change this to a valid URL)
viewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg";
viewer.zoom(lt.Controls.ControlSizeMode.none, .8, viewer.defaultZoomOrigin);
});
Supported Environments
See Also
Reference
Libraries
Getting Started
Version History
Libraries Changes History
