In This Topic ▼

autoCreateCanvas Property

Summary

Indicates whether to automatically create an HTML5 Canvas Element when the image is updated.

Syntax

TypeScript

JavaScript

Object.defineProperty(ImageViewerItem.prototype, 'autoCreateCanvas', 
	get: function(), 
	set: function(value) 
)

autoCreateCanvas: boolean;

Property Value

true to automatically create the canvas when the image is updated; otherwise, false. The default value is false.

Remarks

ImageViewerItem supports using an HTML Image Element (in the Image property), an HTML5 Canvas Element (in the Canvas property), or other HTML Elements and SVG Elements (in the Element property). The automatic creation of an HTML5 Canvas Element is not supported when Element is being used.

Using an img generally consumes less system resources, supports larger sizes, takes advantage of browser caching, and is not affected by cross-origin security policy. However, the image data is read-only and cannot be changed directly.

Using a canvas might consume more system resources, have limited size in some platforms, does not use the browser caching, and is affected by cross-origin browser security policy. However, the image data is read-write and can be changed directly using the HTML5 Canvas Element drawing context.

If using a canvas is always desired, the user can create the canvas outside of the ImageViewer and populate it with the image data. Or, the user can set the value of AutoCreateCanvas to true and set the image element (or URL) into the ImageViewerItem. In this mode, the viewer will create the HTML5 Canvas Element and populate with the image data, then set it in the Canvas property; the original img is discarded.

As mentioned above, an HTML5 Canvas Element might have size limitations depending on the current platform and number of current canvas elements in the page. ImageViewer can automatically adjust the size of a large canvas using the global CanvasOptions class as follows:

The canvas is created using the original size desired. If successful, no more action is taken.
If an error occurs, CanvasOptions.AutoScale is checked. If the value is set to true (the default), a smaller size is tried (usually dividing the original size by two), until the operation succeeds. When this is finished, the scale value used (0.5, 0.25, etc.), is stored in the CanvasScale. The viewer will then use this value along with ImageSize to scale the rendering of the item up, showing it at its original size.
The user can control the maximum width or height of an auto-created canvas by setting the value of CanvasOptions.MaximumSize to a value greater than the default of 0. In this mode, the viewer will automatically re-scale a canvas that is larger than the size set, even if they can be created successfully. This is useful to minimize the resources used by the application when many canvas elements are created.
If all the above fails an ItemError will occur, and it is up to the user to handle this and perform the necessary action. One solution would be to revert to using an img and disable the parts of the application that require a canvas, such as image processing.

Example

This example creates an image and loads it, then adds it to the imageviewer while the item has AutoCreateCanvas as true. Then the canvas is retrieved and drawn to.

AutoCreateCanvas.ts

ImageViewer.ts

AutoCreateCanvas.js

ImageViewer.js

AutoCreateCanvas.html

import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewerItem_AutoCreateCanvasExample { 
   private viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   private run = (viewer: lt.Controls.ImageViewer) => { 
      // Setup: clear the old item 
      viewer.items.clear(); 
 
      // Create the image to pass in 
      const img = document.createElement("img"); 
      img.onload = () => { 
         // Loaded 
 
         const item: lt.Controls.ImageViewerItem = new lt.Controls.ImageViewerItem(); 
         // Now either add the item to the viewer first, or set item.autoCreateCanvas to true 
         item.autoCreateCanvas = true; 
         item.image = img; 
         viewer.items.add(item); 
 
         // Now, it is a canvas 
         const canvas = item.canvas as HTMLCanvasElement; 
         const output = document.getElementById("output"); 
         output.innerHTML = "Is Canvas: " + (!!canvas && canvas instanceof HTMLCanvasElement); 
 
         // Draw to it 
         const context: CanvasRenderingContext2D = canvas.getContext("2d"); 
         context.fillStyle = "rgba(255, 0, 0, .8)"; 
         context.fillRect(25, 25, 325, 325); 
 
         // Invalidate so we see the change (or just pan or zoom to see) 
         viewer.invalidateItem(item); 
      }; 
      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 ImageViewerItem_AutoCreateCanvasExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      // Setup: clear the old item 
      viewer.items.clear(); 
 
      // Create the image to pass in 
      const img = document.createElement("img"); 
      img.onload = () => { 
         // Loaded 
 
         const item = new lt.Controls.ImageViewerItem(); 
         // Now either add the item to the viewer first, or set item.autoCreateCanvas to true 
         item.autoCreateCanvas = true; 
         item.image = img; 
         viewer.items.add(item); 
 
         // Now, it is a canvas 
         const canvas = item.canvas; 
         const output = document.getElementById("output"); 
         output.innerHTML = "Is Canvas: " + (!!canvas && canvas instanceof HTMLCanvasElement); 
 
         // Draw to it 
         const context = canvas.getContext("2d"); 
         context.fillStyle = "rgba(255, 0, 0, .8)"; 
         context.fillRect(25, 25, 325, 325); 
 
         // Invalidate so we see the change (or just pan or zoom to see) 
         viewer.invalidateItem(item); 
      }; 
      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 | AutoCreateCanvas</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.ImageViewerItem.AutoCreateCanvas(); 
 
   }; 
</script> 
</html>

Requirements

Target Platforms

Reference

ImageViewerItem Class

ImageViewerItem Members

Leadtools.Controls Namespace

Download our FREE evaluation

Help Version 21.0.2021.7.2

Leadtools.Controls Assembly

Introduction

Getting Started

Namespaces

Leadtools.Controls Namespace

Assemblies