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>
  










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





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

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ