SQLの窓

2011年06月20日


Flex4 : ローカルPC画像を Image オブジェクトにロード、Image オブジェクトに表示されている画像をローカルPC に保存



Image は、Panel 内に設置しているので、Panel ごと保存する方法も実装しています。

▼ クリックすると、実行ページが開きます

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	initialize="initData()"
	usePreloader="false"
>
<!--
***************************************************
 Flex4 における 絶対位置指定
*********************************************** -->
<s:layout>
	<s:BasicLayout />
</s:layout>

<!--
***************************************************
 現在のクラスの非デフォルト、非ビジュアルプロパ
 ティ を宣言します。例えば、効果、バリデーター、
 およびフォ ーマッターを定義します。
*********************************************** -->
<fx:Declarations>
</fx:Declarations>

<!--
***************************************************
 名前空間が必要になっています
 #id で個別設定が可能です
*********************************************** -->
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace s "library://ns.adobe.com/flex/spark";

s|Button {
	color : #990000;
	font-size : 16;
}

</fx:Style>

<fx:Script>
<![CDATA[

	import mx.formatters.*;

	// HTTPService のイベント用
//	import mx.rpc.events.*;
	// Alert 用
	import mx.controls.*;

	// 画像ファイルを読み込む為の二つのオブジェクト
	private var fr:FileReference;
	private	var loader:Loader

	// 画像名をパネルのタイトルに表示する為の変数
	[Bindable]
	private var fname:String = "";

	// PNG 画像保存用
	import mx.graphics.codec.*;
	private	var png_enc:PNGEncoder;
	private var ba_data:ByteArray;


	// *********************************************************
	// ログ表示
	// *********************************************************
	private function log(data:Object):void {

		// 日付編集用
		var fmt:DateFormatter = new DateFormatter();

		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );

		// JavaScript の呼び出し
		ExternalInterface.call(
			"console.log", logdt,
			" "+data
		);

	}

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	private function initData():void {

		// メッセージ
		log("initData() が実行されました" );

		Security.allowDomain("*");

		// ファイル読み込み用
		fr = new FileReference();
		// Bitmap 変換用
		loader = new Loader();
		// PNG 画像作成用
		png_enc = new PNGEncoder();


		// IO エラー
		fr.addEventListener(IOErrorEvent.IO_ERROR, 
			function (event:IOErrorEvent):void {
				Alert.show("IOError:" + event.text );
			}
		);

		// キャンセル
		fr.addEventListener(Event.CANCEL, 
			function (event:Event):void {
				Alert.show( "ファイル選択をキャンセルしました" );
			}
		);

		// ファイルが選択された
		fr.addEventListener(Event.SELECT,
			function (event:Event):void {
				log("ファイルが選択されました" );
				var file:FileReference = FileReference(event.target);
				fname = file.name;
				log("name : " + file.name );
				// 読み込み開始
				fr.load();
			}
		);

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

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

	}

	// *********************************************************
	// ファイル参照ダイアログを開く
	// *********************************************************
	private function selectFile():void {

		try {
			fr.browse();
		}
		catch (e:Error) {
			log(e);
		}

	}

	// *********************************************************
	// 保存
	// ※ Image オブジェクトに格納された画像の直接保存
	// *********************************************************
	private function saveImage1():void {


		try {
			// ビットマップデータを PNG に変換
			ba_data = png_enc.encode( Bitmap(imageCheck.content).bitmapData );
		}
		catch( e:Error ) {
			log( e );
		}

		// PNG バイナリ(ByteArray) を保存
		fr.save( ba_data, "save_1.png" );

	}

	// *********************************************************
	// 保存
	// ※ Panel オブジェクト全体を画像として保存
	// ※ Image オブシェクトに適宜縮小されている画像イメージ
	//    を保存したい場合は、imagePanel のかわりに imageCheck
	//    を使用します
	// *********************************************************
	public function saveImage2():void {

		// パネルサイズのビットマップデータを作成
		var bitmapData:BitmapData = new BitmapData(imagePanel.width, imagePanel.height);

		// 用意したビットマップデータにパネルを描画
		bitmapData.draw(imagePanel);

		// ビットマップデータを PNG に変換
		ba_data = png_enc.encode(bitmapData);

		// PNG バイナリ(ByteArray) を保存
		fr.save( ba_data, "save_2.png" );

	}

]]>
</fx:Script>

<!--
***************************************************
 Flex4 における 絶対位置指定の画面定義
*********************************************** -->

<s:Button 
	id="loadButton"
	x="10" y="10"
	width="120"
	label="画像選択"
	click="selectFile();"
/>

<s:Button 
	id="saveButton"
	x="140" y="10"
	width="120"
	label="画像保存"
	click="saveImage1();"
/>

<s:Button 
	id="savePanelButton"
	x="270" y="10"
	width="120"
	label="Panel保存"
	click="saveImage2();"
/>

<mx:Panel
	id="imagePanel"
	title="{fname}"
	x="10" y="40"
	paddingLeft="0"
	paddingRight="0"
	layout="absolute"
>
	<mx:Image
		x="0" y="0"
		id="imageCheck"
		width="650"
		height="500"
	
	/>
</mx:Panel>

</s:Application>



【Flexの最新記事】
posted by lightbox at 2011-06-20 01:58 | Flex | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり