WEB Flex : ByteArray の画像データを Image コントロールに表示する方法


  概要とダウンロード




▼ 実装ページ

ローカル画像ファイルを表示 : WEB Flex


ブラウザでダウンロード

Flex では、デイスク上に保存されているようなファイルそのままのデータを ByteArray に格納して利用します。
WEB 上で実行される swf では、URL による呼び出しでそのデータを取得する事ができます。その場合は、
URLLoader クラスを使用します

URLLoader クラスは、3種類のデータタイプを扱う事ができます。ByteArray はそのうちの一つで、dataFormat
プロパティが URLLoaderDataFormat.BINARY の場合、受け取るデータは、生のバイナリデータを含む ByteArray
オブジェクト(インスタンス)です。

※ dataFormat プロパティが URLLoaderDataFormat.TEXT の場合、受け取るデータは、文字列ストリングです。
※ dataFormat プロパティが URLLoaderDataFormat.VARIABLES の場合、URLVariables オブジェクトです

このデータは、data プロパティに ロード操作が完了したときにのみ設定されます。
以下は、オンラインマニュアルのサンプルの一部です

  

public function URLLoaderExample() {
	var loader:URLLoader = new URLLoader();
	configureListeners(loader);

	var request:URLRequest = new URLRequest("urlLoaderExample.txt");
	try {
		loader.load(request);
	} catch (error:Error) {
		trace("Unable to load requested document.");
	}
}

private function configureListeners(dispatcher:IEventDispatcher):void {
	dispatcher.addEventListener(Event.COMPLETE, completeHandler);
	dispatcher.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
}

private function completeHandler(event:Event):void {
	var loader:URLLoader = URLLoader(event.target);
	trace("completeHandler: " + loader.data);

	var vars:URLVariables = new URLVariables(loader.data);
	trace("The answer is " + vars.answer);
}
private function ioErrorHandler(event:IOErrorEvent):void {
	trace("ioErrorHandler: " + event);
}
  

Flash の10からは、ローカルの PC から画像データを直接取得する方法が用意されており、ビルド時にオプションが必要ですが、FileReferenceを使用して結果的に ByteArray オブジェクトとして取得する事が可能になっています。
( FileReference では、data プロパティは必ず ByteArray です )

しかし、Image オブジェクトに画像を表示するには、source プロパティにセットする必要があり、Bitmap オブジェクトである必要があります。ですから、ByteArray を Bitmap に変換する必要があり、その為に利用するのがLoaderクラスの loadBytes メソッドです。

Loader クラスは、本来画像ファイルを URL 経由で取得して直接 Bitmap に変換して使う事ができます。
ですから、URL 経由で画像ファイルを取得する場合には URLLoader クラスは必要ありません。


▼ ビルドコマンドライン
  

mxmlc Main.mxml  -target-player=10.0.12
  










  ソースコード




  

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="initData();"
	applicationComplete="initApplication()"
	paddingLeft="0"
	paddingTop="20"
	paddingBottom="0"
	paddingRight="0"
>

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

<mx:Script>
<![CDATA[
// *********************************************************
// Image コントロールから画像保存
// *********************************************************

	import mx.formatters.*;
	import mx.graphics.codec.*;
	
	private var loadRef:FileReference;
	private var bmp:BitmapData = null;
	private	var png:ByteArray;
	private	var enc:PNGEncoder;

	private	var loader:Loader

	// *********************************************************
	// ログ表示
	// *********************************************************
	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 initData():void {


	}

	// *********************************************************
	// アプリケーションの初期化( 画面構築後 )
	// *********************************************************
	public function initApplication():void {

		// ローカルファイル用
		loadRef = new FileReference();
		loader = new Loader();

		// 選択完了時にバイナリロード開始
		loadRef.addEventListener(Event.SELECT,
			function(event:Event):void {
				firebug( "選択完了" );
				loadRef.load();
			}
		);

		// バイナリロード完了
		loadRef.addEventListener(Event.COMPLETE,
			function(event:Event):void {
				// この時点ではまだ ByteArray なので、
				// Bitmap に変換する為に
				//  Loader オブジェクトで再度ロード
				firebug( "ByteArray ロード完了" );
				loader.loadBytes(loadRef.data);
			}
		);

		// 画像ロード完了
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
			function(event:Event):void {
				firebug( "画像ロード完了" );
				// Image コントロールに Bitmap をセットして表示
				imageCheck.source = Bitmap(event.target.content)
			}
		);

	}

	// *********************************************************
	// ロード
	// *********************************************************
	public function loadImage():void {

		// 表示チェック
		loadRef.browse();

	}


]]>
</mx:Script>

<mx:Panel
	title="Image オブジェクトに画像データを直接ロード"
	horizontalAlign="center"
	paddingTop="10"
	paddingLeft="0"
	paddingRight="0"
	paddingBottom="30"
	width="600"
>

	<mx:Button
		id="loadButton"
		label="ロード"
		click="loadImage();"
		width="200"
	/>

	<mx:Image
		id="imageCheck"
		width="400"
		height="300"
		
	/>

</mx:Panel>

</mx:Application>
  




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


[flex3]
CCBot/2.0 (https://commoncrawl.org/faq/)
21/01/25 09:28:42
InfoBoard Version 1.00 : Language=Perl

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