Add copyright infomation and titles to exported jpeg image of map?

Question

Hi,

Hope someone can help on this. I attach my print widget so everyone can see what I am attempting. Basically I need to attach the same information that i do on printing to an exported jpeg image.

Using various examples that i have found around the place I have customised my print widget, so that on print I can add a header and subtitle (entered into widget by user) and a copyright statement that I pulled in from the map service itself (Created in the mxd). Clearly this isnt perfect yet, but it is working in principle.

I need to do the exact same thing for exported images, and I thought I could get this to work in exactly the same way as printing: Adding the details, taking a snapshot and then removing them and saving the jpeg from the snapshot. The export currently doesnt work because it fails with a bitmap source error: on the following line in the exportmap function (with error 2015):const imageSnapshot:ImageSnapshot = ImageSnapshot.captureImage(printBox,96,decoder,true);

This is because i am using the printbox as the source for the imagesnapshot. If i use map instead as the source, this works: But this obviously doesn't include all the textual information I need.

If anyone has any suggestions on how to get this working, I would be extremely grateful!

thanks,

PrintWidget.zip

ready to use watershed.jpg

IvanBespalov · Answer

something like this:
1) - draw Map to BitmapData (screenshot)
2) - change BitmapData as you want (insert logo)
3) - as a result save it or ... send to html via ExternalInterface /**
 * Embed the logo image.
 * Used when saving map as image
 * */
[Embed(source="assets/images/logo.png")]
public var logo:Class;

private var pngFileName:String = "image.png";

private var bitmapData:BitmapData;
private var logoBitmapData:BitmapData;

/**
 * export png
 */
private function exportPngImage():void
{
 if (flashMap)
 {
  var fileReference:FileReference = new FileReference();
  
  if (flashMap.zoomSliderVisible)
  {
   // hide zoom slider
   /* here if it's necessary also hide:
   crosshair at the center of the map,
   ESRI logo,
   pan arrows around the edge of the map,
   scale bar on the map.
   */
   hideNavigator();
   // add listeners to show zoom slider after execution
   fileReference.addEventListener(Event.COMPLETE, fileSaveComplete);
   fileReference.addEventListener(Event.CANCEL, fileSaveCancel);
   // force UIComponent update/redraw
   flashMap.validateNow();
  }
  
  try
  {
   var mapComponent:UIComponent = flashMap as UIComponent;
   var exportData:BitmapData = getBitmapData(mapComponent);
   if (exportData)
   {
    // encode to PNG format
    var pngEncoder:PNGEncoder = new PNGEncoder();
    var byteArray:ByteArray = pngEncoder.encode(exportData);
    // exit full screen to show save dialog
    this.fullScreen = false;
    // open dialog box
    fileReference.save(byteArray, pngFileName);
    
    exportData = null;
    bitmapData = null;
    logoBitmapData = null;
   }
  }
  catch (ioError:IllegalOperationError)
  { // handle error }
  catch (error:Error)
  { // handle error }
 }
}

/**
 * file upload/download canceled by user
 */
protected function fileSaveCancel(event:Event):void
{
 showNavigator();
}

/**
 * file upload/download completed
 */
protected function fileSaveComplete(event:Event):void
{
 showNavigator();
}

/**
 * get bitmap data from IBitmapDrawable component
 */
private function getBitmapData(uiComponent:UIComponent):BitmapData
{
 if (uiComponent)
 {
  try
  {
   // map image size
   var mapWidth:Number = uiComponent.width;
   var mapHeigth:Number = uiComponent.height;
   // get flash map bitmap data
   bitmapData = new BitmapData(mapWidth, mapHeigth);
   var matrix:Matrix = new Matrix();
   bitmapData.draw(uiComponent, matrix);
   
   var logoBitmap:Bitmap = new logo();
   // logo image size
   var logoWidth:Number = logoBitmap.width;
   var logoHeigth:Number = logoBitmap.height;
   // get logo bitmap data
   logoBitmapData = new BitmapData(logoWidth, logoHeigth);
   logoBitmapData.draw(logoBitmap, matrix);
   
   // calculate logo left-top position on map
   var logoX:Number = mapWidth - logoWidth - 10;
   var logoY:Number = mapHeigth - logoHeigth - 10;
   var point:Point = new Point(logoX, logoY);
   var mult:uint = 0x100; // 100% (256) RGBA channels multipliers
   bitmapData.merge(logoBitmapData, logoBitmapData.rect, point, mult, mult, mult, mult);
  }
  catch (error:Error)
  {
   Logger.logError(error);
  }
 }
 return bitmapData;
}

grahamcooke · Answer

Sorry to bump my own thread but I am still stuck on this one. Is anyone able to assist on this please? I would be extremely grateful 🙂