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;
}
  






yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[flex3]
claudebot
24/04/18 11:26:01
InfoBoard Version 1.00 : Language=Perl

1 BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube