WEBカメラとローカルのPCにある画像を合成して画像を保存

  現在 WEB サービスとして稼働させています



▼ 画像をクリック
Shot_2


吹き出し画像をサンプルとして用意していますが、
基本的には自分で画像を用意して使って下さい
( WEB カメラの画像を映したいところは PNG を透過にします )



  ソースコード



元となったテストバージョンはビルドパッケージとしてダウンロードできます

WEB Flex : WEBカメラで表示している映像を静止画で保存する

  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	applicationComplete="initOk();"
>

<mx:Style source="Style.css" />

<mx:Script>
<![CDATA[

	import mx.controls.*;
	import mx.events.*; 
	import mx.formatters.*;
	import mx.graphics.codec.PNGEncoder;
	import flash.external.*;
	import flash.media.Camera;

	private var camera:Camera;
	private var fRef:FileReference;
	private var loader:Loader;
	private var actType:int = 0;

	// *********************************************************
	// ログ表示
	// *********************************************************
	public function firebug(data:Object):void {
	
		var fmt:DateFormatter = new DateFormatter();
	
		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );
	
		ExternalInterface.call(
			"console.log", logdt,
			data+""
		);
	
	}

	// *********************************************************
	// アプリケーション開始時のイベント登録
	// *********************************************************
	public function initOk():void {

		// ファイルリファレンスの準備
		fRef = new FileReference();
		// ファイル保存用ダイアログを表示して保存する
		// ビルドに -target-player=10.0.12 オプションが必要
		// 以下の例では、エラー以外のイベントには空の無名関数が関係づけられています
		fRef.addEventListener(Event.OPEN, function(e:Event):void {} );
		fRef.addEventListener(
			ProgressEvent.PROGRESS, function(e:ProgressEvent):void {} );
		fRef.addEventListener(Event.COMPLETE, function(e:Event):void {

			// 処理完了後の処理

			// 読み出す
			if ( actType == 0 ) {
				loader = new Loader();
				loader.loadBytes(FileReference(e.target).data);
				loader.contentLoaderInfo.addEventListener(
					Event.INIT,function(e:Event):void{

					// 前回の画像を削除
					try {
					   myImage.rawChildren.removeChildAt(0);
					}
					catch( error:Error ) {
					}

					firebug( "追加しました1" );
					myImage.rawChildren.addChild(e.target.content);
					firebug( "追加しました2" );
				});
				firebug( "ロードが完了しました" );
			}
			// 保存が完了
			if ( actType == 1 ) {
				firebug( "保存が完了しました" );
			}
		} );
		fRef.addEventListener(Event.CANCEL, function(e:Event):void {} );
		fRef.addEventListener(Event.SELECT, function(e:Event):void {
			// ファイル選択後の処理
			if ( actType == 0 ) {
				firebug( "ロードします" );
				FileReference(e.target).load();
				firebug( "ロードを開始しました" );
			}
			if ( actType == 1 ) {
				firebug( "保存します" );
			}
		} );
		fRef.addEventListener(IOErrorEvent.IO_ERROR, fRefError );

		initData();

	}

	// *********************************************************
	// カメラの初期化
	// *********************************************************
	public function initData():void {

		camera = Camera.getCamera();
		if ( camera ) {
			camera.setMode(640, 480, 10, true);
			myVid.attachCamera( camera );
		}

	}

	// *********************************************************
	// 撮影と保存( Flash 全体 )
	// *********************************************************
	public function shot():void {

		var bitmap:Bitmap = new Bitmap();
		var bitmapData:BitmapData = new BitmapData(this.width, this.height);
		bitmap.bitmapData = bitmapData;
		bitmapData.draw(this);

		var pngEnc:PNGEncoder = new PNGEncoder();
		var png:ByteArray = pngEnc.encode(bitmap.bitmapData);

		firebug( "撮影しました" );

		actType = 1;
		fRef.save( png, "shot.png" );

	}

	// *********************************************************
	// 撮影と保存( VideoDisplay + Canvas )
	// *********************************************************
	public function shot2():void {

		var bitmap:Bitmap = new Bitmap();
		var bitmapData:BitmapData = new BitmapData(base.width, base.height);
		bitmap.bitmapData = bitmapData;
		bitmapData.draw(base);

		var pngEnc:PNGEncoder = new PNGEncoder();
		var png:ByteArray = pngEnc.encode(bitmap.bitmapData);

		firebug( "撮影しました" );

		actType = 1;
		fRef.save( png, "shot2.png" );

	}

	// *********************************************************
	// IOエラー
	// *********************************************************
	public function fRefError( e:IOErrorEvent ):void {
		Alert.show(e.text);
	}


]]>
</mx:Script>

<mx:Panel
	title="超シンプル Camera( Camera が無い場合は Canvas )"
	horizontalAlign="center"
	paddingLeft="0"
	paddingRight="0"
>
<mx:Canvas paddingLeft="0" paddingRight="0" id="base" width="480" height="360">
	<mx:VideoDisplay
		id="myVid"
		width="480" height="360"
	/>
	<mx:Canvas
		id="myImage"
		width="480" height="360"
	/>
</mx:Canvas>
</mx:Panel>

<mx:VBox>
<mx:HBox paddingTop="10">
	<mx:Button
		id="shotButton"
		label="保存ダイアログを開く"
		click="shot();"
		toolTip="撮影"
	/>
	<mx:Button
		id="loadButton"
		label="ローカル画像のロード"
		click="actType=0;fRef.browse();"
	/>
</mx:HBox>
	<mx:Button
		id="shotButton2"
		label="保存(WEBカメラサイズ)"
		click="shot2();"
		toolTip="撮影"
	/>
</mx:VBox>

</mx:Application>
  


  
global {
	fontSize: 12;
	color: #FFFFFF;
}

/*
	● backgroundGradientColors
		背景グラデーションの塗りの着色で使用するカラーを指定します。
		これは、RGB カラーを指定する 2 つの uint 値から成る配列に
		設定する必要があります。
		エレメント 0 および 1 は、カラーグラデーション
		の開始値と終了値を指定します。
		単色の背景の場合は、エレメント 0 と 1 に同じカラー値を設定します。
		値 undefined は、backgroundColor プロパティに基づいて
		背景グラデーションが生成されることを示します。 
		デフォルト値undefined.
*/
Application {
	backgroundGradientColors: 0,#8A0029
}

/*
	全てのコントロールの ToolTip の見栄えを調整
*/
ToolTip {
	background-color:#8A0029;
	color: white;
	fontSize: 16;
	backgroundAlpha:0.8;
}

/*
	● fillColors
		コントロールの背景の着色に使用されるカラーです。
		フラットな外観のコントロールを作成するには、
		どちらの値にも同じカラーを渡します。 
		デフォルト値[ 0xFFFFFF, 0xCCCCCC ]
	● fillAlphas
		[1, 1] を使うと、コントロールの背景が不透明
		になります。
		デフォルト値[ 0.6, 0.4 ]
*/
Button {
	fillColors: #000000,#000000;
	fillAlphas: 1,1;
	color: #FFFFFF;
	textRollOverColor: #FFFFFF;
}

.alertButtonStyle {
	color: #FFFFFF;
}

Alert {
	backgroundColor: #FFFFFF;
	backgroundAlpha: 1;
	color: #000000;
	borderColor: #000000;
	borderStyle: solid;
	borderThickness: 1;
	headerColors: #A0A0A0,#A0A0A0;
}
  












  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ