Flexでカメラ撮影+サーバーへアップロードのアプリを作りました。
Flexでカメラ撮影+サーバーへアップロードのアプリを作りました。
うまくつかえば簡単に写真が撮ることができますね。
こんな感じ(デモバージョンなのでサーバーへはアップロードしません)
http://moeten.info/flex/20080915_moetenPhotoCapDemo/bin-release/photoCap.html
おまけ機能としてほんわか機能をつけています。
女性にうれしいかなぁ。
ソースコードは右クリックから見れます。
サーバー側での処理
PHPでの受け取り方。
<?php if( isset( $GLOBALS["HTTP_RAW_POST_DATA"] ) ){ //JPG 書き込み $data = $GLOBALS["HTTP_RAW_POST_DATA"]; $img = $_GET["img"]; //↑セキュリティの面から「..」や「/」は取り除いたほうがいいね file_put_contents( "{$img}.jpg" , $data ); }else{ echo "Encoded JPEG information not received."; } ?>
以前書いたこちらの記事を同じです(^^;
Flexの映像をJpegに書き出し
カメラから写真をキャプチャー photoCap.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationCompleteEffect="Fade" backgroundAlpha="1" backgroundColor="0xffccff" backgroundGradientAlphas="[1,1]" backgroundGradientColors="[0xffccff,0xff19c1]" creationComplete="init()" verticalScrollPolicy="off" horizontalScrollPolicy="off" width="100%" height="100%" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.effects.easing.*; //初期化関数 private function init():void{ capBtn.enabled = false; sendBtn.enabled = false; pBar.visible = false; //カメラ設定 var camera:Camera = Camera.getCamera(); if (camera != null) { camera.setMode(400,480,16); camera.addEventListener(ActivityEvent.ACTIVITY, activityHandler); video.attachCamera(camera); capBtn.enabled = true; } else { Alert.show("カメラが見つかりません"); capBtn.enabled = false; sendBtn.enabled = false; } } //カメラ見つかったよアクション private function activityHandler(e:Event):void{ } //カメラ用のタイマー private var timer:Timer; private function getPictByCamera():void{ cntTxt.visible = true; cntTxt.text = "-"; myImage.visible = false; myImage2.visible = false; timer = new Timer( 1000 , 4 ); timer.addEventListener(TimerEvent.TIMER , myTick ); timer.start(); } //タイマーイベント private function myTick( e:TimerEvent ):void{ cntTxt.text = "" + ( 4 - timer.currentCount ); if( timer.currentCount == 4 ){ setImage(); timer.stop(); capSound.play(); sendBtn.enabled = true; }else{ countSound.play(); } } //カメラから画像を作成 private var bd:BitmapData = new BitmapData( 400 , 480 , false ); private function setImage():void{ myImage.visible = true; cntTxt.visible = false; bd.draw( video ); myImage.source = new Bitmap( bd ); changeBlur(); } //画像をサーバーにアップロード import mx.graphics.codec.JPEGEncoder; private function sendImage():void{ pBar.visible = true; sendBtn.enabled = false; //バイナリデーター作成 var myEnc:JPEGEncoder = new JPEGEncoder(90); var bd3:BitmapData = new BitmapData( myImage.width , myImage.height ); bd3.draw( myCanvas ); var byteArr:ByteArray = myEnc.encode(bd3); //PHPへバイナリを送信する var urlRequest:URLRequest = new URLRequest("ここにPHPへのURLを指定"); var urlLoader:URLLoader = new URLLoader(); urlRequest.contentType = "application/octet-stream"; urlRequest.method = URLRequestMethod.POST; urlRequest.data = byteArr; urlLoader.load(urlRequest); urlLoader.addEventListener(Event.COMPLETE , onSaved ); } //サーバーアップロード完了 private function onSaved(e:Event):void{ sendBtn.enabled = true; pBar.visible = false; Alert.show("画像を設定しました!"); } //ほんわか機能。画像ブラー+スクリーン private function changeBlur():void{ if( myBlur.selected ){ var bd2:BitmapData = new BitmapData( myImage.width , myImage.height ); bd2.draw( myImage ); var blur:BlurFilter = new BlurFilter( 8 , 8 ); bd2.applyFilter( bd2 , bd2.rect , new Point , blur ); myImage2.source = new Bitmap( bd2 ); myImage2.visible = true; }else{ myImage2.visible = false; } } ]]> </mx:Script> <mx:Style> Button { cornerRadius: 8; textIndent: 0; paddingLeft: 6; paddingRight: 6; paddingTop: 6; paddingBottom: 6; letterSpacing: 0; highlightAlphas: 0.68, 0.58; fillAlphas: 0.79, 0.61, 0.75, 0.94; fillColors: #ffffff, #ff33cc, #ff0066, #ffffff; color: #6600cc; textRollOverColor: #990000; textSelectedColor: #990033; borderColor: #ffccff; themeColor: #ff0099; fontFamily: Arial; fontSize: 18; fontWeight: normal; } ComboBox{ cornerRadius: 8; textIndent: 0; paddingLeft: 6; paddingRight: 6; paddingTop: 6; paddingBottom: 6; letterSpacing: 0; highlightAlphas: 0.68, 0.58; fillAlphas: 0.79, 0.61, 0.75, 0.94; fillColors: #ffffff, #ff33cc, #ff0066, #ffffff; color: #6600cc; textRollOverColor: #990000; textSelectedColor: #990033; borderColor: #ffccff; themeColor: #ff0099; fontFamily: Arial; fontSize: 18; fontWeight: normal; } Label{ color: #6600cc; fontSize: 18; } Alert { titleStyleName: "alertTitle"; messageStyleName: "alertMessage"; buttonStyleName: "alertButton"; dropShadowEnabled: true; shadowDistance: 0; shadowColor:#ff0000; shadowDirection: right; cornerRadius: 10; embedFonts: true; borderColor: #cc66ff; backgroundAlpha: 0.55; } .alertTitle { letterSpacing: 0; fontSize: 14; color: #ffffff; } .alertMessage { letterSpacing: 0; fontSize: 20; fontWeight: normal; color: black; backgroundColor:#ffffff; } .alertButton { backgroundColor:#ffccff; letterSpacing: 0; fontSize: 16; cornerRadius: 10; fontWeight: normal; textRollOverColor: white; color: red; } </mx:Style> <!--################# フィルター #################--> <mx:GlowFilter id="gf" blurX="10" blurY="10" color="0xffccff" strength="20" alpha="0.7" /> <!--################# エフェクト #################--> <mx:SoundEffect id="countSound" target="{this}" source="@Embed('OMT001_01S030.mp3')" useDuration="false" volumeFrom="0.5" volumeTo="0.5"/> <mx:SoundEffect id="capSound" target="{this}" source="@Embed('OMT001_03S003.mp3')" useDuration="false" volumeFrom="0.5" volumeTo="0.5"/> <mx:Sequence id="myShow"> <mx:Move yFrom="-100" yTo="{this.height/2-300}" easingFunction="Back.easeOut" /> </mx:Sequence> <!--################# コンポーネント #################--> <mx:Canvas width="601" height="518" cornerRadius="20" borderStyle="solid" borderColor="0xff48f0" borderThickness="5" horizontalCenter="0" backgroundColor="0xffffff" dropShadowEnabled="true" dropShadowColor="0x000000" creationCompleteEffect="myShow"> <mx:ProgressBar id="pBar" x="0" y="0" width="100%" label="" indeterminate="true" themeColor="#FF45E7" trackHeight="10" showEffect="WipeRight" hideEffect="WipeRight" height="13"/> <mx:Button id="capBtn" x="418" y="239" label="カメラからキャプ" width="163" height="54" click="getPictByCamera()"/> <mx:Button id="sendBtn" x="418" y="436" label="この画像を設定" width="160" height="54" click="sendImage()"/> <mx:Canvas id="myCanvas" x="10" y="21" width="400" height="480"> <mx:VideoDisplay id="video" width="400" height="480" backgroundAlpha="1" backgroundColor="0xffffff"/> <mx:Image id="myImage" width="400" height="480"/> <mx:Image id="myImage2" width="400" height="480" blendMode="screen" visible="true"/> </mx:Canvas> <mx:Label id="cntTxt" x="134" y="108" text="" fontSize="20" scaleX="10" scaleY="10" color="0xffffff" filters="{[gf]}"/> <mx:ComboBox id="cbType" x="418" y="62" width="160" height="54" selectedIndex="0"> <mx:dataProvider> <mx:Array> <mx:Object label="上半身" type="2"/> <mx:Object label="全身" type="3"/> <mx:Object label="その他(コスプレなど)" type="4"/> </mx:Array> </mx:dataProvider> </mx:ComboBox> <mx:Label x="418" y="26" text="1.写真タイプ指定"/> <mx:Label x="418" y="203" text="2.カメラから取り込み"/> <mx:Label x="418" y="400" text="3.履歴書に設定"/> <mx:CheckBox id="myBlur" x="485" y="303" label="ほんわか" change="changeBlur()"/> </mx:Canvas> </mx:Application>