Flex: Saving mx:image with applied effects - apache-flex

Question

I load image to control than I applie some effects, and when I save image it's saving without effects. What should i do?
Here is the code:
private var byteArr2:ByteArray;
private var fileRef:FileReference = new FileReference();
public function process():void
{
var ct:ColorTransform = new ColorTransform();
ct.redOffset = 99;
ct.blueOffset = 11;
ct.greenOffset = 22;
currImg.transform.colorTransform = ct;
callLater(toByteArray);
}
public function toByteArray():void
{
var data:BitmapData = new BitmapData(currImg.width, currImg.width);
data.draw(currImg);
var encod:JPEGEncoder = new JPEGEncoder(100);
byteArr2 = encod.encode(data);
}
public function saveFile():void
{
fileRef.save(byteArr2,"NewFileName1.jpg");
}
<mx:HBox>
<mx:VBox>
<s:Button x="69" y="98" label="open" click="open()()"/>
<s:Button label="show" click="show()"/>
<s:Button label="process" click="process()"/>
<s:Button label="save" click="saveFile()"/>
</mx:VBox>
<mx:Image id="currImg" width="200" height="300"/>
</mx:HBox>
UPDATE Appears new problem as I am using var data:BitmapData = new BitmapData(currImg.width, currImg.width); saved image is small(size like image control) but I need to save image with original size.
With var data:BitmapData = Bitmap(currImg.content).bitmapData; it worked

Answer 1

I would draw the component into a new BitmapData object rather than use the content of the currImg. This should give you what's drawn on the screen rather than the unmodified content. Something like so:
var data:BitmapData = new BitmapData(currImg.width, currImg.width);
data.draw(currImg);
Hope that helps.

Answer 2

Alright this isn't a great solution cause I don't know why it works but if you put a container around the image then save the results of drawing that it seems to work.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.graphics.codec.JPEGEncoder;
private var byteArr2:ByteArray;
private var fileRef:FileReference = new FileReference();
public function process():void
{
var ct:ColorTransform = new ColorTransform();
ct.redOffset = 99;
ct.blueOffset = 11;
ct.greenOffset = 22;
currImg.transform.colorTransform = ct;
callLater(toByteArray);
}
public function toByteArray():void
{
var data:BitmapData = new BitmapData(everything.width, everything.width);
data.draw(everything);
var encod:JPEGEncoder = new JPEGEncoder(100);
byteArr2 = encod.encode(data);
}
public function saveFile():void
{
fileRef.save(byteArr2,"NewFileName1.jpg");
}
]]>
</fx:Script>
<mx:HBox>
<mx:VBox>
<!--<s:Button x="69" y="98" label="open" click="open()"/>-->
<!--<s:Button label="show" click="show()"/> -->
<s:Button label="process" click="process()"/>
<s:Button label="save" click="saveFile()"/>
</mx:VBox>
<mx:Box id="everything">
<mx:Image id="currImg" width="200" height="300" source="http://www.google.com/images/logos/ps_logo2.png"/>
</mx:Box>
</mx:HBox>
</s:Application>
Shaun