WEB Flex : Imageコントロールに表示された画像の保存

  概要とダウンロード



実装ページ

関連する記事
WEB Flex : イメージをドメイン外からロードして BitmapData.draw でアクセスする



ブラウザでダウンロード

Image コントロールに格納されている BitmapData の取り出し方と新しい BitmapData を作成して表示サイズに加工するサンプルです。

もう少し複雑な加工は、Matrix オブジェクトを利用します
( ※ 関連する記事を参照 )

imageCheck.trustContent = true; で、crossdomain.xml を確実に読み込んで加工(保存)可能にしています。crossdomain.xml が無い場合は表示されません




  ソースコード



  
<?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 saveRef:FileReference;
	private var bmp:BitmapData = null;
	private	var png:ByteArray;
	private	var enc:PNGEncoder;

	// *********************************************************
	// ログ表示
	// *********************************************************
	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 {

		// PNG エンコーダー
		enc = new PNGEncoder();
		// 別ドメインの画像データを加工する為に必要です
		imageCheck.trustContent = true;

	}

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

		// ローカルファイル用
		saveRef = new FileReference();

		saveRef.addEventListener(Event.COMPLETE,
			function(event:Event):void {
				firebug( "保存完了" );
				// メモリ開放
				if ( bmp != null ) {
					bmp.dispose();
					bmp = null;
				}
			}
		);

		// イベント登録
		imageCheck.addEventListener(Event.COMPLETE, 
			function(event:Event):void {
				firebug( "ロード完了" );
				saveButton1.enabled = true;
				saveButton2.enabled = true;
			}
		);

	}

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

		// 表示チェック
		imageCheck.source = imageUrl.text;

	}

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

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

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

	}

	// *********************************************************
	// 保存
	// ※ Image オブジェクトに格納された画像の表示サイズ保存
	// *********************************************************
	public function saveImage2():void {

		try {
			// ■ 表示サイズのビットマップデータを作成
			bmp = new BitmapData(
				imageCheck.contentWidth,
				imageCheck.contentHeight
			);
			// ビットマップデータに画像を描画
			bmp.draw(imageCheck);
			// ビットマップデータを PNG に変換
			png = enc.encode(bmp);
		}
		catch( e:Error ) {
			firebug( e );
		}

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

	}



]]>
</mx:Script>

<mx:Panel
	title="Image オブジェクトに格納された画像の保存"
	horizontalAlign="center"
	paddingTop="10"
	paddingLeft="0"
	paddingRight="0"
	paddingBottom="30"
	width="600"
>

	<mx:Label text="▼URL" />

	<mx:TextInput
		id="imageUrl"
		width="500"
		text="http://lightbox.cocolog-nifty.com/photos/image_another/b17eva239.jpg"
	/>

	<mx:Button
		id="loadButton"
		label="ロード"
		click="loadImage();"
		width="200"
	/>
	<mx:Button
		id="saveButton1"
		label="オリジナル画像保存"
		click="saveImage1();"
		width="200"
		enabled="false"
	/>
	<mx:Button
		id="saveButton2"
		label="表示サイズ画像保存"
		click="saveImage2();"
		width="200"
		enabled="false"
	/>
	
	<mx:Image
		id="imageCheck"
		width="200"
		height="200"
		
	/>

</mx:Panel>

</mx:Application>
  










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





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

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ