addFromImage Method

Summary

Adds a new item from an HTML Image Element.

Syntax
TypeScript
JavaScript
ImageViewerItems.prototype.addFromImage = function( 
   image, 
   resolution 
) 
addFromImage( 
   image: HTMLImageElement, 
   resolution: LeadSizeD 
): ImageViewerItem; 

Parameters

image

Source image element.

resolution

The resolution to use for the image in dots/inch (DPI). A value of 0,0 or Empty means to use the default image resolution of 96 pixels.

Return Value

The newly created item, if successful.

Remarks

This method allows you to quickly add an item from an HTML Image Element. It is the equivalent of the following code:

var item = new lt.Controls.ImageViewerItem(); 
item.image = image; 
item.resolution = resolution; // Optional 
imageViewer.items.add(item); 

If image is null, then an empty item is added.

AddFromElement can be used as a shortcut for AddFromImage or AddFromCanvas. Passing a valid HTML Image Element to AddFromElement will create an ImageViewerItem with the Image property set, just as it does with AddFromImage. Similarly, passing a valid HTML5 Canvas Element to AddFromElement will create an ImageViewerItem with the Canvas property set, just as it does with AddFromCanvas. The item can have a value in only one of Image, Element, or Canvas. Setting one value will automatically delete the values of the others.

To add the ImageViewerItem at a specific location, see InsertFromImage or InsertFromElement. To create an item without adding it to any ImageViewer, refer to CreateFromImage or CreateFromElement.

Example

This example creates a new image and adds it to the viewer.

AddFromImage.ts
ImageViewer.ts
AddFromImage.js
ImageViewer.js
AddFromImage.html
import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewerItems_AddFromImageExample { 
   private viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   private run = (viewer: lt.Controls.ImageViewer) => { 
      // Set up margin and padding and layout 
      viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
      viewer.itemBorderThickness = 5; 
      viewer.itemPadding = lt.Controls.ControlPadding.createAll(20); 
      viewer.itemMargin = lt.Controls.ControlPadding.createAll(10); 
 
      const img = document.createElement("img"); 
      img.onload = () => { 
         viewer.items.addFromImage(img, lt.LeadSizeD.create(96, 96)); 
      }; 
      img.src = "https://demo.leadtools.com/images/png/pngimage.png"; 
   } 
} 
export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   protected imageViewer: lt.Controls.ImageViewer = null; 
   // Generic state value used by the examples 
   public timesClicked: number = 0; 
 
   constructor(callback?: (viewer: lt.Controls.ImageViewer) => void) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = 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, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
} 
import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewerItems_AddFromImageExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      // Set up margin and padding and layout 
      viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
      viewer.itemBorderThickness = 5; 
      viewer.itemPadding = lt.Controls.ControlPadding.createAll(20); 
      viewer.itemMargin = lt.Controls.ControlPadding.createAll(10); 
 
      const img = document.createElement("img"); 
      img.onload = () => { 
         viewer.items.addFromImage(img, lt.LeadSizeD.create(96, 96)); 
      }; 
      img.src = "https://demo.leadtools.com/images/png/pngimage.png"; 
   } 
} 
export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   imageViewer = null; 
   // Generic state value used by the examples 
   timesClicked = 0; 
 
   constructor(callback) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // 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, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
} 
<!doctype html> 
<html lang="en"> 
<title>Controls Example | AddFromImage</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Document.Viewer.js"></script> 
   <style> 
      body { 
         font-family: 'Segoe UI', sans-serif; 
      } 
 
      #imageViewerDiv { 
         border: 1px solid #888; 
         width: 500px; 
         height: 500px; 
         background-color: #eee; 
      } 
   </style> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <p>Press and drag on the image to pan.</p> 
   <p>Hold down the control key and press and drag on the image or pinch with two fingers to zoom in and out.</p> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="imageViewerDiv"></div> 
   <div id="output"></div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.ImageViewerItems.AddFromImage(); 
 
   }; 
</script> 
</html> 
Requirements
Target Platforms
Help Version 21.0.2021.7.2
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2021 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Controls Assembly
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2021 LEAD Technologies, Inc. All Rights Reserved.