Saturday, June 27, 2009

Image Capture in AIR

Image Capture is made easy in AIR. This simple App can capture images from Web as well as the clipboard.  It supports partial Capture as well. This uses Object Handles for partial capture.

capture

Capturing Images from the Clipboard

var g:Clipboard = Clipboard.generalClipboard;

    //if the Image format is not correct
    if( !g.hasFormat( ClipboardFormats.BITMAP_FORMAT)){
        mx.controls.Alert.show("No Images on the clipboard!");
    }

    //Drawing Images
    var bd2:BitmapData;
    bd2 = g.getData( ClipboardFormats.BITMAP_FORMAT ) as BitmapData;
    myImage2.source = new Bitmap( bd2 );

Entire Source code

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"
    xmlns:local="*" backgroundAlpha="1" backgroundColor="0xffccff"
    width="884" height="900" xmlns:objecthandles="com.roguedevelopment.objecthandles.*" >
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.graphics.codec.PNGEncoder;

//Image Storage
private var bd:BitmapData;

//Initialization
private function init():void{
}

//Save the Whole page
private function getPage():void{
    var w:int;
    var h:int;
    if( radiogroup1.selectedValue == "0" ){

        //Web Save Image
        w = int(myHtmlW.text);
        h = int(myHtmlH.text);
        bd = new BitmapData( w , h );
        bd.draw( myHtml );
    }else{

        //Save the Image clip
        w = myImage2.width;
        h = myImage2.height;
        bd = new BitmapData( w , h );
        bd.draw( myImage2 );
    }

    //View Images for writing
    myImage.source = new Bitmap( bd );

    //Enable Save button
    mySaveBtn.enabled = true;
    finishTxt.visible = false;
}

//Save part
private function getCap():void{

    //Image Available
    var w:int = myTest.width;
    var h:int = myTest.height;
    bd = new BitmapData( w , h );

    //Because of the Images Size, getting the partial width and height
    var rec:Rectangle = new Rectangle();
    rec.width = w;
    rec.height = h;
    var mat:Matrix = new Matrix();
    mat.tx = -myTest.x;
    mat.ty = -myTest.y;
//    mat.scale(mySlider.value,mySlider.value);
//    mat.a = mySlider.value;
//    mat.d = mySlider.value;

    if( radiogroup1.selectedValue == "0" ){

        //Web Save Image
        bd.draw( myHtml , mat , null , null , rec );
    }else{

        //Save the Image clip
        bd.draw( myImage2 , mat , null , null , rec );
    }

    //View Images for writing
    myImage.source = new Bitmap( bd );
    //Save Button Enabled   
    mySaveBtn.enabled = true;
    finishTxt.visible = false;
}

//Save Images
private function saveImage():void{

    //Determining the file name
    var fname:String = new String();
    var d:Date = new Date();
    fname = "" + d.getFullYear() + "Year"+(d.getMonth()+1) + "Month"+d.getDay()+"Day"+d.getHours() +"Hours"+ d.getMinutes() + "Min" + d.getSeconds() + "Sec.png";

    //Save File
    var png:PNGEncoder = new PNGEncoder();
    var bta:ByteArray = png.encode(bd);
    var save_file:File = File.desktopDirectory;
    save_file = save_file.resolvePath(fname);
    var fs:FileStream = new FileStream();
    fs.open(save_file,FileMode.UPDATE);
    fs.writeBytes(bta, 0, bta.length);
    fs.close();

    //File Saved, Disable Save Button
    mySaveBtn.enabled = false;
    finishTxt.visible = true;
}

//Get Images from the clipboard
private function getClipbord():void{
    var g:Clipboard = Clipboard.generalClipboard;

    //if the Image format is not correct
    if( !g.hasFormat( ClipboardFormats.BITMAP_FORMAT)){
        mx.controls.Alert.show("No Images on the clipboard!");
    }

    //Drawing Images
    var bd2:BitmapData;
    bd2 = g.getData( ClipboardFormats.BITMAP_FORMAT ) as BitmapData;
    myImage2.source = new Bitmap( bd2 );

}

]]>
</mx:Script>
<mx:Style>
ApplicationControlBar {
   highlightAlphas: 1, 0.3;
   fillAlphas: 0.64, 0.24;
   fillColors: #ffffff, #cc00ff;
   backgroundAlpha: 0.67;
   cornerRadius: 5;
   dropShadowEnabled: true;
   shadowDistance: 1;
}
</mx:Style>

<mx:Label x="10" y="202" text="{radiogroup1.selection.label}" fontSize="20"/>
<mx:Button x="83" y="207" label="←" click="{myHtml.historyBack()}" visible="{!Boolean(radiogroup1.selectedValue)}"/>
<mx:Button x="131" y="207" label="→" click="{myHtml.historyForward()}" visible="{!Boolean(radiogroup1.selectedValue)}"/>
<mx:Image id="myImage2" x="10" y="241"  visible="{Boolean(radiogroup1.selectedValue)}"
    />
<mx:Canvas x="10" y="241" height="{int(myHtmlH.text)}" width="{int(myHtmlW.text)}">
    <mx:HTML id="myHtml" x="2.5" y="1" width="100%" height="100%"  visible="{!Boolean(radiogroup1.selectedValue)}"
        verticalScrollPolicy="off" horizontalScrollPolicy="off"/>
    <objecthandles:ObjectHandles id="myTest" allowHResize="false" allowVResize="false" allowHMove="true"
        borderStyle="solid" borderThickness="2" borderColor="0xff0000"
        height="{int(myTestH.text)}" width="{int(myTestW.text)}" visible="{myTestV.selected}">
        <mx:Canvas backgroundColor="0xff0000" alpha="0.3" width="100%" height="100%" />
    </objecthandles:ObjectHandles>
</mx:Canvas>

<mx:RadioButtonGroup id="radiogroup1"/>
<mx:ViewStack x="11" y="48" id="viewstack1" width="378" height="150" selectedIndex="{int(radiogroup1.selectedValue)}" backgroundColor="0xe1ffe6">
    <mx:Canvas label="web" width="100%" height="100%">
        <mx:Label x="27" y="46" text="URL"/>
        <mx:Label x="27" y="72" text="Size Aspect"/>
        <mx:TextInput id="myUrlTxt" x="127" y="44" width="188" text="http://google.com" enter="{myHtml.location=myUrlTxt.text}" />
        <mx:TextInput id="myHtmlH" x="127" y="70" width="64" text="600"/>
        <mx:TextInput id="myHtmlW" x="218" y="70" width="64" text="800"/>
        <mx:Label x="199" y="72" text="x"/>
        <mx:Button x="323" y="44" label="GO" click="{myHtml.location=myUrlTxt.text}"/>
    </mx:Canvas>
    <mx:Canvas label="clip" width="100%" height="100%">
        <mx:Button x="111.5" y="59" label="Read From the Clipboard" click="getClipbord()"/>
    </mx:Canvas>
</mx:ViewStack>

<mx:RadioButtonGroup id="radiogroup2"/>
<mx:ViewStack x="400" y="49" id="viewstack2" width="257" height="150" selectedIndex="{int(radiogroup2.selectedValue)}" backgroundColor="0xfff6db">
    <mx:Canvas label="View 1" width="100%" height="100%">
        <mx:Button id="myButton0" x="75.5" y="59" label="Page Capture" click="getPage()"/>
    </mx:Canvas>
    <mx:Canvas label="a" width="100%" height="100%">
        <mx:Button id="myButton" x="81.5" y="92" label="Capture part" click="getCap()"/>
        <mx:TextInput id="myTestH" x="81.5" y="23" width="64" text="200"/>
        <mx:TextInput id="myTestW" x="172.5" y="23" width="64" text="300"/>
        <mx:Label x="153.5" y="25" text="x"/>
        <mx:Label x="20.5" y="25" text="Size Aspect"/>
        <mx:CheckBox id="myTestV" x="81.5" y="53" label="View" selected="false"/>
    </mx:Canvas>
</mx:ViewStack>

<mx:Canvas x="667" y="49" width="215" height="150" backgroundColor="0xe1e3ff">
    <mx:Image id="myImage" x="10" y="10" width="129" height="100"/>
    <mx:Button id="mySaveBtn" label="Save Image" enabled="false" click="saveImage()" x="108" y="118"/>
    <mx:TextInput id="finishTxt" x="46" y="119" text="Save Successfull" visible="false" width="55" />
</mx:Canvas>

<mx:ApplicationControlBar x="10" y="11" width="382">
    <mx:RadioButton label="Web" value="0" groupName="radiogroup1" selected="true"/>
    <mx:RadioButton label="Clipboard" value="1" groupName="radiogroup1"/>
</mx:ApplicationControlBar>
<mx:ApplicationControlBar x="400" y="11" width="259">
    <mx:RadioButton label="Capture Whole" value="0" groupName="radiogroup2" selected="true"/>
    <mx:RadioButton label="Capture part" value="1" groupName="radiogroup2"/>
</mx:ApplicationControlBar>
<mx:ApplicationControlBar x="667" y="11" width="215" barColor="0x46458a" height="33">
    <mx:Label text="Output Image"/>
</mx:ApplicationControlBar>
</mx:WindowedApplication>

No comments: