Using Pictures in Annotation Objects

Summary

The AnnPicture class provides a picture object used by several LEADTOOLS annotation object classes. The following LEADTOOLS annotation objects use the AnnPicture class:

Each of these classes (either through direct implementation or inheritance), access properties that control how the AnnPicture is used in the annotation object.

AnnImageObject:

The AnnImageObject class derives from AnnRectangleObject and adds the Picture property, which is used to fill the object's Bounds.

AnnHotspotObject:

The AnnHotspotObject class derives from AnnImageObject and adds the DefaultPicture property, which can be used to set the default AnnPicture used to fill the object's Bounds.

AnnFreehandHotspotObject:

The AnnFreehandHotspotObject class derives from AnnPolylineObject and adds both the Picture and DefaultPicture properties.

AnnPointObject:

The AnnPointObject class derives from AnnObject and adds both the Picture and DefaultPicture properties.

AnnStampObject:

The AnnStampObject class derives from AnnTextObject and adds the Picture property.

AnnPicture from External PNG File or Data

The following examples will create an AnnStampObject with a picture stored in an external PNG file or data:

  • Using a PNG image via URL, such as http://myserver/myimages/file.png:
    JavaScript
    function createStampFromPngFile(container /*:AnnContainer*/, bounds /*:LeadRectD*/, pngImage /*:string*/) { 
       // Create a new AnnStampObject 
       var stampObject = new lt.Annotations.Engine.AnnStampObject(); 
       // Set its bounds 
       stampObject.rect = bounds; 
       // Set the picture from the PNG 
       var picture = new lt.Annotations.Engine.AnnPicture(pngImage); 
       stampObject.picture = picture; 
       // Add the stamp object to container 
       container.children.add(stampObject); 
    } 
  • Using PNG data URI:
    JavaScript
    function createStampFromPngFile(container /*:AnnContainer*/, bounds /*:LeadRectD*/, pngImage /*:string*/) { 
       // Create a new AnnStampObject 
       var stampObject = new lt.Annotations.Engine.AnnStampObject(); 
       // Set its bounds 
       stampObject.rect = bounds; 
     
       // Load the picture as a data URL 
       var getDataUrl = function (img: HTMLImageElement) { 
          var canvas = document.createElement("canvas"); 
          canvas.width = img.width; 
          canvas.height = img.height; 
          var ctx = canvas.getContext("2d"); 
          ctx.drawImage(img, 0, 0); 
          return canvas.toDataURL(); 
       }; 
     
       // Create HTML image to load the PNG 
       var img = <HTMLImageElement>document.createElement("img"); 
       img.addEventListener("load", function (event) { 
          // Render the image into the canvas to get its data 
          var dataUrl: string = getDataUrl(<HTMLImageElement>event.currentTarget); 
     
          // Get it into the AnnPicture object 
          var picture = lt.Annotations.Engine.AnnPicture.empty; 
          // Set it in a pictureData object (this is the base 64 representation without the data URI format) 
          picture.pictureData = dataUrl.substring("data:image/png;base64,".length); 
          stampObject.picture = picture; 
          // Add the stamp object to the container 
          container.children.add(stampObject); 
       }); 
       img.addEventListener("error", function (event) { 
          alert("error loading " + pngImage); 
       }); 
       img.src = pngImage; 
    } 
Help Version 20.0.2020.4.3
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2020 LEAD Technologies, Inc. All Rights Reserved.

LEADTOOLS HTML5 JavaScript