In This Topic ▼

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:

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:

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; 
}