topic Re: Save UIComponent to a file (jpg) in ArcGIS API for Flex Questions

Save UIComponent to a file (jpg)

AshleyOwens — Thu, 12 May 2011 12:05:35 GMT

I am attempting to save a UIComponent that includes a title, subtitle, map and textarea to a file in jpg format. Can anyone provide a simple example of this? Thank you!

Re: Save UIComponent to a file (jpg)

ReneRubalcava — Fri, 10 Dec 2021 22:13:41 GMT

It's been a while since I've done this, but you can turn the component to a bitmap
something like

var bmd:BitmapData = new BitmapData(com.width, comp.height);
bmd.draw(comp, new Matrix());
var bm:Bitmap = new Bitmap(bmd);

Then you can use a jpeg encoder to save the bitmapdata to a jpeg file.

Flex Framework provides it's own JPEGEncoder
mx.graphics.codec.JPEGEncoderYou just pass the BitmapData to the encoder and it does the work.

Here is a demo of how to use the jpegencoder to save the image to disc.
http://ntt.cc/2009/01/09/as3corelib-tutorialhow-to-use-jpegencoder-and-pngencoder-class-in-flex.html

Hope that helps.

Re: Save UIComponent to a file (jpg)

AshleyOwens — Fri, 10 Dec 2021 22:13:43 GMT

Thank you for your response! I keep getting error "ArgumentError: Error #2015: Invalid BitmapData." on the line where I create my BitmapData object (scroll to the bottom of the code to see where I create my BitmapData).

private function saveFile():void
{
 var zoomSliderVisibleBeforePrint:Boolean;
 if (map.zoomSliderVisible)
 {
  map.zoomSliderVisible = false;
  zoomSliderVisibleBeforePrint = true;
 }
 var printJob:FlexPrintJob = new FlexPrintJob();
 var h:Number = printJob.pageHeight;
 var w:Number = printJob.pageWidth;
 //VGROUP
 var printBox:VGroup = new VGroup();
 printBox.styleName = "PrintBox";
 printBox.width = map.width;
 //VGROUP inner
 var printBoxTitle:VGroup = new VGroup();
 var printBoxSubTitle:VGroup = new VGroup();
 var selectedAlign:String = LRCa[LRCcbo.selectedIndex];
 printBox.horizontalAlign=LRCa[LRCcbo.selectedIndex].toString().toLocaleLowerCase();

 this.addChild(printBox);     
 
 try
 {
  //TITLE
  var printTitle:Label = new Label();
  printTitle.text = txtTitle.text;
  if (titleFontSize!=0)
  {
   printTitle.setStyle("fontSize", titleFontSize);
  }
  else
  {
   printTitle.setStyle("fontSize", h / 12);
  }
  if (titleFontWeight!="")
   printTitle.setStyle("fontWeight", titleFontWeight);
  printTitle.percentWidth = 100;
  printBoxTitle.addElement(printTitle);
  //SUBTITLE
  var printSubtitle:Label = new Label();
  printSubtitle.text = txtSubtitle.text;
  if (subtitleFontSize!=0)
  {
   printSubtitle.setStyle("fontSize", subtitleFontSize);
  }
  else
  {
   printSubtitle.setStyle("fontSize", h / 24);
  }
  if (subtitleFontWeight!="")
  {
   printSubtitle.setStyle("fontWeight", subtitleFontWeight); 
  }
  printSubtitle.percentWidth = 100;
  printBoxSubTitle.addElement(printSubtitle);


  printBox.addElement(printBoxTitle);
  printBox.addElement(printBoxSubTitle);
  
  //MAP
  var bmpMap:BitmapData = ImageSnapshot.captureBitmapData(map);
  var printImg:BitmapImage = new BitmapImage();
  printImg.smooth = true;
  printImg.source = bmpMap;
  printBox.addElement(printImg);
  //COPYRIGHT
  var now:Date = new Date();
  var printCopy:Label = new Label();
  printCopy.text = copyright + " " + now.toLocaleString() + ".";
  if (copyrightFontSize!=0)
  {
   printCopy.setStyle("fontSize", copyrightFontSize);
  }
  else
  {
   printCopy.setStyle("fontSize", h / 48);
  }
  if (copyrightFontWeight!="")
  {
   printCopy.setStyle("fontWeight", copyrightFontWeight); 
  }
  printCopy.percentWidth = 100;
  printBox.addElement(printCopy);

  //COMMENTS
  if(txtComments.textFlow.getText())
  {       
   var spacerLabel:Label = new Label();
   spacerLabel.text = " ";
   //set the comment title:
   var printCommentTitleLabel:Label = new Label();
   printCommentTitleLabel.setStyle("fontSize", h / 24);
   printCommentTitleLabel.text = "Comments:  ";
   //set the comments:
   var printComment:Label = new Label();
   printComment.setStyle("fontSize", h / 48);
   printComment.text = txtComments.textFlow.getText();       
   //add to container:
   var printBoxComments:VGroup = new VGroup();
   printBoxComments.percentWidth = 100;
   printBoxComments.addElement(spacerLabel);
   printBoxComments.addElement(printCommentTitleLabel);
   printBoxComments.addElement(printComment);
   printBox.addElement(printBoxComments); 
  }     
 }
 finally
 {
 }    

 var bd:BitmapData = new BitmapData(printBox.width, printBox.height); //ArgumentError: Error #2015: Invalid BitmapData.    
 bd.draw(printBox, new Matrix());
 var pngEnc:PNGEncoder = new PNGEncoder();
 var imgData:ByteArray = pngEnc.encode(bd);  
 fileReference = new FileReference();
 fileReference.save(imgData,"TIGER.png");
}

Re: Save UIComponent to a file (jpg)

ReneRubalcava — Fri, 10 Dec 2021 22:13:46 GMT

It looks like it should work and I just tested the BitmapData to PNG part and it works for me.
The only thing I can think of is maybe you need to explicitly set height where you set the width.

printBox.width = map.width;
printBox.height = map.height;

Since you are creating the printBox in your function, it never actually gets added to the application stage, which is ok. But the events that occur when a Component is added (visually) to an application do the leg work for you of defining the componets width/height based on it's children.
In this case, since the component is just used in this function, those lifecycle events never happen, thus printBox.height is proabably null.
Explicitly setting it should work... I think 🙂

Re: Save UIComponent to a file (jpg)

AshleyOwens — Thu, 12 May 2011 17:04:38 GMT

Thanks Rene! It now prompts me to save the file. When I open the saved file, however, the image is blank. Seems like I'm still missing something...

Re: Save UIComponent to a file (jpg)

ReneRubalcava — Fri, 10 Dec 2021 22:13:49 GMT

Looking at your code, I see that you are adding the printbox to your app at some point.
I think the bitmap->png code is firing before the component has had a chance to draw.
You can try waiting for the addedToStage event

printBox.addEventListener(Event.ADDED_TO_STAGE, printBoxReady);
this.addChild(printBox);

function printBoxReady(e:Event):void
{
    // code to turn your printbox into bitmapdata and encode to png
    // and initialize your filereference
}

At that point, you should be able to see your component, so it is fully drawn and ready.
You'll probably want to wait to do this.addChild() until after you have added everything into printbox you want to add.

Re: Save UIComponent to a file (jpg)

AshleyOwens — Fri, 10 Dec 2021 22:13:51 GMT

I added the following to my finally block -

finally
{      
 printBox.addEventListener(Event.ADDED_TO_STAGE, printBoxReady);
 this.addChild(printBox); 
}

And then created the printBoxReady function -

function printBoxReady(e:Event):void
{    
 var bd:BitmapData = new BitmapData(printBox.width, printBox.height); 
 bd.draw(printBox, new Matrix());
 var pngEnc:PNGEncoder = new PNGEncoder();
 var imgData:ByteArray = pngEnc.encode(bd);    
 fileReference = new FileReference();
 fileReference.save(imgData,"TIGER.png");
}

But the resulting saved PNG is still blank!

Re: Save UIComponent to a file (jpg)

ReneRubalcava — Thu, 12 May 2011 17:39:19 GMT

Hmm, sorry, at this point, I'm at a loss.
I tried pretty much the same to save a map and it worked.

Can you see the preview on your screen with everything added to it?

Re: Save UIComponent to a file (jpg)

AshleyOwens — Thu, 12 May 2011 17:54:00 GMT

It's weird, a preview shows up just underneath my widget when I click "Save to File". I can see the subtitle and map, and the map is displaying backwards! See attached screen shot.

Re: Save UIComponent to a file (jpg)

ReneRubalcava — Thu, 12 May 2011 19:21:06 GMT

Ok, I tried a few things, modifying the Print Widget in Flexviewer and it's not the addedToStage event you want to listen for. Sorry, I forgot that in Flex, the FlexEvent.CreationComplete is what fires when all flex components are done being created.

When that fiires, you can encode the component to PNG/JPG. But, here's the rub. You can't use FileReference on FlexEvents, they're sandboxed for security purposes. So, you would probably need to create a small preview window, then have second button to actually save the data.

I reviewed the print functionality in one of my apps,and this how we do it for PDF saves. I need to create a preview, then a button to actually save the file.

Rather than post snippets or the whole thing here, you can see the dirty way I modified the print widget to do this.
https://gist.github.com/969352

Hope that helps.
Sorry I had to dust off the cobwebs on this one 🙂

Re: Save UIComponent to a file (jpg)

AshleyOwens — Fri, 13 May 2011 11:11:23 GMT

Thank you! It works! 😄 For some reason though, the map that is saved is backwards. Have you seen this before?

Re: Save UIComponent to a file (jpg)

ReneRubalcava — Fri, 13 May 2011 12:23:25 GMT

That was a weird one.
It happened to me while testing, but if I waited for the addedToStage event, then add the image, it worked fine. That shouldn't happen if you wait for the creationComplete event, then view it.

Re: Save UIComponent to a file (jpg)

AshleyOwens — Fri, 13 May 2011 14:53:18 GMT

Can you explain more about how to
- wait for the addedToStage event, then add the image, or
- wait for the creationComplete event, then view it

(sorry, I'm still really new with Flex!)

Re: Save UIComponent to a file (jpg)

ReneRubalcava — Fri, 10 Dec 2021 22:13:54 GMT

Sure. The image data doesn't seem to like being added to the printBox until after the printBox is added to the stage.
I updated the code sample in the link to reflect this.

// I commented out this line of code
// where printImg is created
//printBox.addElement(printImg);

// I added this listener
printBox.addEventListener(Event.ADDED_TO_STAGE, function(e:Event):void {
 trace("added to stage");
 printBox.addElement(printImg);
});

Now, the image should display and save correctly.
I have to admit, I don't know why the image displays backwards if it's added to the component before the component is added to the stage.

AddedToStage fires as soon as the component comes on screen (not necessarily viewable), but before it's done being rendered. CreationComplete should fire when the component is fully rendered and ready to be viewed.

I can't seem to find a Component Lifecycle reference online directly from Adobe, but here are some slides
http://www.flex888.com/1219/flex-4-components-life-cycle.html

Here is a diagram of the UIComponent lifecycle (I have this printed and tacked to my office wall)
http://danorlando.com/?p=122
Spark skins have a few more things that happen to manage skinning
http://help.adobe.com/en_US/flex/using/WS460ee381960520ad-2811830c121e9107ecb-7fff.html#WS460ee381960520ad-2811830c121e9107ecb-7ffc

And I know there are quite a few god Flex books that should include a more detailed description of the lifecycle process of what happens when you create a component.

You don't usually need to worry about waiting for most of these events anymore, maybe creationComplete if you are modifying an MXML component. Flex 4 and Skinnning have made build components much easier than it used to be.

This is just an odd case because we are using a component as a reference to generate an image, so there are considerations that need to be made about when that component is actually fully rendered and ready to be captured.

Hope that helps.

Re: Save UIComponent to a file (jpg)

AshleyOwens — Fri, 13 May 2011 18:47:34 GMT

You are a WEALTH of knowledge! Thank you so much for all your help! I am still working through some kinks, but overall it is working well and I am SO MUCH FARTHER along than I was. Thanks again!

Re: Save UIComponent to a file (jpg)

AshleyOwens — Fri, 10 Dec 2021 22:13:56 GMT

Do you know if there's a way to save a file without doing a "preview" first? I tried adding

var fr:FileReference = new FileReference();    
fr.save(printData, "TIGER.png");

several different places and I can't get it to work. One thing I tried was creating a handler for addedToStage and included the above code, but the function was only called when the widget first loaded.
Just wondering if it was possible to execute the "preview" code, then prompt the user to save to a file immediately. It seems there needs to be a pause in between "preview" and "save".
Thanks again for your help!

Re: Save UIComponent to a file (jpg)

AshleyOwens — Mon, 16 May 2011 15:44:55 GMT

Also, is there a way to save a multi-page file? I have a title, subtitle & comments above my map, which causes my map to run off the page.

Re: Save UIComponent to a file (jpg)

ReneRubalcava — Tue, 17 May 2011 12:44:59 GMT

If it weren't for the mirror image issue, you could. Unfortuntely, I don't know how to get around that without first doing the preview because the Flash player has built in security that will not allow you to save a file without some sort of user interaction such as a button click. You can't do it off a timer or another other event. I have not tried to simulate a button click, but I don't think that would work.

If you want to look into a multi-page option, maybe PDF would be a better solution.
http://code.google.com/p/alivepdf/
AlivePDF is an actionscript library to save PDF files directly from Flash. It's very popular among many users on this forum and the process is similar to the way you are saving an image.