使用Flex撷取影像

在Flex 2撷取影像其实很简单，之前不小心在网络上看到一个范例(不过我忘记在哪了:P)，不过那倒无所谓，我做了一个类似的范例，原理就是祗要建立一个 ActionScript组件，利用mxml里呼叫此组件，当然您需要一个按钮来做这快照，再实时地快照到面版里就可以。

直接浏览范例：http://j2eemx.com/flex/webcam/webcam.html

所有程序代码...

ActionScript Class文件范例如下：

    package myComponents{ import mx.containers.Panel; import flash.media.Camera;    import flash.media.Video;    import mx.core.UIComponent;   

          public class WebcamPanel extends Panel

            {

            public var video:Video

            public function WebcamPanel(){

            super();

            insertWebcamVideo();

            }

            public function insertWebcamVideo():void{

            var videoHolder:UIComponent = new UIComponent();

            var camera:Camera = Camera.getCamera();

            video = new Video(camera.width*2, camera.height*2);

            video.attachCamera(camera);

            videoHolder.addChild(video);

            addChild(videoHolder);

            videoHolder.y =10;

            }

            }

            }

WebCam.mxml程序代码如下：



<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

xmlns:MyComp="myComponents.*" layout="absolute">

            <mx:Script>

            <![CDATA[

            import mx.core.UIComponent;

            import flash.display.BitmapData; 

          //快照函数 

            public function takeSnapshot():void{

            var snapshotHolder:UIComponent = new UIComponent();

            var snapshot:BitmapData = new BitmapData(320, 240, true);

            var snapshotbitmap:Bitmap = new Bitmap(snapshot);

            snapshotHolder.y =10;

            snapshotHolder.addChild(snapshotbitmap);

            pnlSnapshot.addChild(snapshotHolder);

            snapshot.draw(pnlWebcam.video);

            pnlSnapshot.visible = true;

            }

            ]]>

            </mx:Script>

          <!--初始影像面版 -->

<MyComp:WebcamPanel x="69" y="51" width="360"  height="320"  layout="absolute" backgroundColor="#ffffff" 

            backgroundAlpha="1.0" title="这是动态影像" fontSize="18" fontFamily="Verdana" 

            color="#000000" borderColor="#0080ff" borderStyle="solid" cornerRadius="0" barColor="#FFFFFF" borderThickness="10" 

            dropShadowColor="#FFFFFF" dropShadowEnabled="false"  footerColors="#FFFFFF" headerColors="#FFFFFF" 

            highlightAlphas="0" shadowDirection="center" textAlign="right" textDecoration="none" borderAlpha="0" 

            fontWeight="bold" id="pnlWebcam" shadowDistance="10" alpha="1.0" >

</MyComp:WebcamPanel>

<!--影像撷取后之面版 -->

<mx:Panel x="499" y="51" width="360" height="320" layout="absolute" backgroundColor="#ffffff" backgroundAlpha="1.0" title="这是影像撷取" fontSize="18" fontFamily="Verdana" color="#ff0080" borderColor="#ff0080" borderStyle="solid" cornerRadius="0" barColor="#FFFFFF" borderThickness="10" dropShadowColor="#FFFFFF" dropShadowEnabled="false" footerColors="#FFFFFF" headerColors="#FFFFFF" highlightAlphas="0" shadowDirection="right" textAlign="left" textDecoration="none" borderAlpha="0" fontWeight="bold" id="pnlSnapshot" visible="false">

</mx:Panel>

<!--按钮触发快照影像 -->

<mx:Button x="192" y="379" borderColor="#FFFFFF" focusAlpha="1" color="#ffffff" textRollOverColor="#FFFFFF" textSelectedColor="#000000" themeColor="#0080ff" fillAlphas="[1.0, 1.0]" errorColor="#ff0080" fillColors="[#0080ff, #0080ff]" fontSize="14" fontFamily="Verdana" fontWeight="bold" cornerRadius="0" alpha="1.0" click="takeSnapshot()" label="撷 取 影 像"/>

<mx:Label x="69" y="25" text="Flex Demo From RiS http://j2eemx.com" fontSize="18"/>

</mx:Application>