<cfcomponent output="false">
   
   <cffunction name="saveImage" access="remote" output="false" returntype="string">

    <cfargument name="data" type="binary" required="true" />
      
      <cfset var sPath   = "">
      <cfset var sFile   = "">
      
      <cflock name="writeImage" type="exclusive" throwontimeout="false" timeout="5">
         
         <cfset sFile   = "IMG.jpg" >
         
         <cfset sPath = expandPath( "#sFile#" )>
         <cffile action="write" file="#sPath#" output="#arguments.data#" >
         
      </cflock>
      
      <cfreturn sFile>
      
</cffunction>
   
</cfcomponent>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0xFFFFFF" >
   <mx:Script>
      <![CDATA[
      
         import mx.managers.PopUpManager;
         import mx.controls.Label;
         import mx.rpc.events.FaultEvent;
         import mx.controls.Alert;
         import mx.rpc.events.ResultEvent;
         import mx.core.UIComponent;
         import com.adobe.images.JPGEncoder;
         import mx.events.ColorPickerEvent;
         
         private var popUp:Label;
         
         private function onFontChange(event:ColorPickerEvent ):void
         {
            //Change the Text Color
taTextArea.setStyle( "color" , event.color );
            
         }

         private function onBGChange(event:ColorPickerEvent ):void
         {
            //Change the background color       
      taTextArea.setStyle( "backgroundColor" , event.color );
            
         }
         
         private function onCBChange( event:Event ) :void
         {
            
            //Set the font weight
            taTextArea.setStyle( "fontWeight" , cbBold.selected ? "bold" : "normal" );
            
         }
         
         private function onSaveClick( event:Event ):void
         {
         
            //pop up a "Saving" message
            popUp   = PopUpManager.createPopUp(textEditor , Label , true ) as Label;
            PopUpManager.centerPopUp( taTextArea );
            popUp.setStyle( "fontSize" , "20" );
            popUp.text = "SAVING";
            
            //Get the JPG encoder
            var jpgEncoder:JPGEncoder   = new JPGEncoder( 75 );
            
            //Get the UI component
            var bd:BitmapData         = getUIComponentBitmapData( textEditor );   
            
            //Convert the UI component to a JPG
            var ba:ByteArray         = jpgEncoder.encode( bd );
            
            //Send the ByteArray to the CFC to be saved
            ro.saveImage( ba );
            
         }
         
         private function onResult( event:ResultEvent ):void
         {
            
            //remove the popup
            PopUpManager.removePopUp( popUp );

            //load the image URL and load the image
            imgJPG.source   = event.result;
            imgJPG.load();



         }
         
         private function onFault(event:FaultEvent):void
         {            
            //remove the popup
            PopUpManager.removePopUp( popUp );
            
            //Turn off busy
            ro.showBusyCursor   = false;
            
            Alert.show("It broke! \n" + event.message );
            
         }
         
         //Andrew Trice's Function see: http://www.cynergysystems.com/blogs/page/andrewtrice?entry=flex_2_bitmapdata_tricks_and
         private function getUIComponentBitmapData( target : UIComponent ) : BitmapData
         {
          var bd : BitmapData = new BitmapData( target.width, target.height );
          var m : Matrix = new Matrix();
          bd.draw( target, m );
          return bd;
         }
      ]]>
   </mx:Script>
   
   <!-- RemoteObject tag to point to the CFC on the server -->
   <mx:RemoteObject
      id="ro"
      showBusyCursor="true"
      destination="ColdFusion"
      source="textExample.WriteImage">
   
      <mx:method name="saveImage"
         result="onResult(event)"
         fault="onFault(event)"
      />
   </mx:RemoteObject>
   
   <mx:HBox>
      
      <mx:VBox
         id="textEditor"
         dropShadowEnabled="true"
         borderColor="0x000000"
         borderStyle="solid"
         paddingBottom="10"
         paddingLeft="10"
         paddingRight="10"
         paddingTop="10"
         cornerRadius="10"
         backgroundColor="0xdddddd"
         >
      
         <mx:TextArea
            id="taTextArea"
            width="100%"
            height="200"
            focusIn="taTextArea.selectionBeginIndex = 0;taTextArea.selectionEndIndex = taTextArea.text.length;"
            fontSize="16"
            >
            
            <mx:text>Put your Text in here</mx:text>
            
         </mx:TextArea>
         
         <mx:Form>
         
            <mx:FormItem label="Font Color:">                     
               <mx:ColorPicker id="cpFontColor" change="onFontChange( event );" />
            </mx:FormItem>
            
            <mx:FormItem label="Back Ground Color:">
               <mx:ColorPicker id="cpBGColor" change="onBGChange( event );" selectedColor="0xFFFFFF" />            
            </mx:FormItem>
            
            <mx:FormItem label="Bold:">
               <mx:CheckBox id="cbBold" change="onCBChange( event );" />
            </mx:FormItem>
            
            <mx:FormItem label="Save Text Editor as JPG:">
               
               <mx:Button
                  id="btnSave"   
                  label="Save"               
                  click="onSaveClick( event );"
               />
            </mx:FormItem>
         </mx:Form>
      </mx:VBox>
      
      <mx:VBox backgroundAlpha="0.5">
         
         
         <mx:Label fontSize="16" fontWeight="bold" text="The Image:" visible="{imgJPG.source != null}" />
         <mx:Image id="imgJPG" />
   
      </mx:VBox>
   </mx:HBox>
   
</mx:Application>