Using Pictures in Annotation Objects

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

• AnnImageObject

• AnnHotspotObject

• AnnFreehandHotspotObject

• AnnPointObject

• AnnStampObject

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