(untagged)

HTML5 Imaging with LEADTOOLS

LEADTOOLS Support

7 Jan 2013

I’ll show how to add the HTML5 / JavaScript viewer control to a web page, load an image, and set some interactive modes

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Download demo - 1.6 KB

Introduction

The concept of zero footprint imaging application deployment has been around for a while, but is regaining popularity as more and more people are relying on their mobile devices and tablets for everyday tasks. The increasing diversity of platforms and operating systems makes this a challenge. The adaptation of the Canvas element in HTML5 became the perfect solution to this problem since the same application can run on any desktop, tablet or mobile device by simultaneously increasing your potential client-base and lowering your development and support efforts.

LEADTOOLS now includes a JavaScript SDK for both document and medical imaging. LEAD Technologies has been providing programmer friendly development toolkits supporting the latest in imaging technologies for over 20 years. Developers targeting the latest mobile devices and tablets can now put powerful imaging technologies such as OCR, Barcode, Image Display and Processing, DICOM, PACS and more into the palms of their customers’ hands.

Key HTML5 & Zero Footprint Features in LEADTOOLS SDKs

HTML5 / JavaScript Viewer Control for cross-platform image viewing
Works on any desktop, tablet or mobile device browser that supports HTML5
Supports both mouse and multi-touch (gesture) input
Interactive Modes Include:
- Pan
- Scale
- Zoom to Rectangle
- Center at Point
- Magnifying Glass
- Pinch and Zoom
Display images based on physical and logical units
Built-in image manipulation for:
- Rotate
- Flip
- Resize/Scale
Native HTML5 Image Annotation and Markup
Extend with LEADTOOLS RESTful Web services to add advanced features such as extended file format support (e.g. TIFF, PDF, DOC, DICOM, etc.), OCR and Barcode
Display DICOM images with Window Leveling and metadata from your local archive or any remote PACS
Source code included for easy customization and branding

SDK Products that Include HTML5 Technology

The HTML5 Code

In the examples below, I’ll show how to add the HTML5 / JavaScript viewer control to a web page, load an image, and set some interactive modes. Additionally, I’ll use JSON with the image formats RESTful web service to load a non-web format like PDF.

HTML5 / JavaScript Viewer Control

The primary HTML5 object used under the hood of the HTML5 library is the Canvas. Combined with the LEADTOOLS JavaScript libraries, the image canvas can display an image with all the standard UI features one would only expect to see within a rich client control such as pan, zoom, magnifying glass, center at point and more. All of these interactive modes work flawlessly on desktops, tablets and mobile phones alike, with both mouse and multi-touch gesture input (e.g. pinch and zoom).

To add the viewer control to an HTML document, all one needs is a wrapper div and a few lines of JavaScript code that runs on the page load and the LEADTOOLS JavaScript libraries do the rest!

<head>
   <script type="text/javascript">
      run: function SiteLibrary_DefaultPage$run() {
         // Create the viewer
         var createOptions = new
Leadtools.Controls.ImageViewerCreateOptions('imageViewerDiv', 'myViewer');
         _viewer = new Leadtools.Controls.ImageViewer(createOptions);

         // Set the image URL - load using browswer support
        
_viewer.set_imageUrl("http://demo.leadtools.com/images/jpeg/cactus.jpg");
      },
   </script>
</head>
<body>
   <div id="imageViewerDiv" />
</body>

At first glance this may not seem like much since you could load a JPEG, PNG or GIF in a standard <img> tag, wrap it in a <div> and you have a basic “image viewer” with scrollbars. This is where the interactive modes come into play to give the viewer some rich UI features such as a magnifying glass or the ability to pan, pinch and zoom on a touch screen (or Ctrl + Click on a mouse). After adding the buttons to the HTML, you must modify the run function above with some event handlers and voila!

var buttonPanZoom = document.getElementById('buttonPanZoom');
buttonPanZoom.addEventListener('click', function (e) {
   // Set the interactive mode to PanZoom
   var interactiveModePanZoom = new
Leadtools.Controls.ImageViewerPanZoomInteractiveMode();
   _viewer.set_defaultInteractiveMode(interactiveModePanZoom);
}, false);
 
var buttonMagnify = document.getElementById('buttonMagnify');
buttonMagnify.addEventListener('click', function (e) {
   // Set the interactive mode to MagnifyingGlass
   var interactiveModeMagGlass = new Leadtools.Controls.ImageViewerMagnifyGlassInteractiveMode();
   interactiveModeMagGlass.set_borderThickness(5);
   _viewer.set_defaultInteractiveMode(interactiveModeMagGlass);
}, false);

RESTful Web Services

REST isn’t a new technology since was part of HTTP 1.0 and 1.1, but many web applications have moved away from it over time. However, when using zero footprint, client-side applications using HTML5 and JavaScript, REST is a better choice due to simple interfacing with JavaScript Object Notation (JSON).

LEADTOOLS comes with RESTful web services for image formats (shown here), OCR, Barcode, and image processing. The image formats web service takes any image and converts it to a web-displayable format and returns it to the viewer. This means one can load and display any of the 150+ formats that LEADTOOLS supports.

One can call the REST service and parse the JSON manually to get image information such as width, height, etc. That isn’t always necessary, however, because the viewer can do all of the work for you by simply giving it the service URL:

loadPDF: function SiteLibrary_DefaultPage$loadPDF(viewer) {
   // This the image we want to load
   var imageUrl =
"http://demo.leadtools.com/images/pdf/leadtools.pdf";
   // Append it to the REST service Load method
   var restLoad =
"http://localhost/LEADTOOLSRESTServicesHost/Raster.svc/Load?uri=" +
imageUrl;
   // Set it into the viewer
            _viewer.set_imageUrl(restLoad);
},

Conclusion

LEADTOOLS provides developers with access to the world’s best performing and most stable imaging libraries in an easy-to-use, high-level programming interface enabling rapid development of business-critical applications.

HTML5 and RESTful Web Services are only one of the many technologies LEADTOOLS has to offer. For more information on our other products, be sure to visit our home page, download a free fully functioning evaluation SDK, and take advantage of our free technical support during your evaluation.

Download the Full HTML5 Example

You can download a fully functional demo which includes the features discussed above. To run this example you will need the following:

LEADTOOLS free 60 day evaluation
Run the configuration utility (C:\LEADTOOLS 17.5\Shortcuts\HTML5\01 Document\01 Local Demos\07 Run This First To Configure Demos and Services) to create the virtual directories for the HTML5 demos and RESTful Web Services
Copy LEADTOOLSHTML5RESTDemo.htm to C:\LEADTOOLS 17.5\Examples\JS\HTML5Demos (this is where http://localhost/LEADTOOLSHTML5Demos points)
If loading images hosted in your IIS, make sure you add MIME types for each format you wish to support (e.g. .j2k = image/jpeg-2000, .dcm = image/dicom, etc.)

Support

Need help getting this sample up and going? Contact our support team for free technical support! For pricing or licensing questions, you can contact our sales team (sales@leadtools.com) or call us at 704-332-5532.

For More Information on HTML5 Imaging with LEADTOOLS

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here