Lightbox Info Board : SQLの窓

ダウンロードと概要

▼ 実装ページ
ZIP書庫保存 : WEB Flex

関連する記事
1) WEB Flex : PV3D 2.1.920 の nochump.util.zip を利用してローカルPCにZIP書庫を保存
2) #2122 : セキュリティサンドボックス侵害 : checkPolicyFile フラグが設定されませんでした
3) Flash用crossdomain.xml

ブラウザでダウンロード

基本的な内容は、PV3D　のクラスを使って zip 書庫に画像データをセットして、ローカルの PC に保存します。関連する記事と違うのは、URLLoader を使わずに、Image コントロールを使っているところです。

URLLoader は、直接ファイルをバイナリで読み込むので、crossdomain.xml で許可さえされておればそのままで画像イメージなので画像として書庫へ書き込む事ができます。しかし、Image コントロールは、画像のコンテナのようになっており、表示している状態を新たにバイナリに変換するにはいくつか手順があります。また、crossdomain.xml の存在だけではそのデータを扱えないので、trustContent プロパティを true にする必要があります

但し、ここで注意しなければならないのは、Image コントロールでただ画像を表示するだけならば、crossdomain.xml を意識する必要が無いのに、加工を前提として trustContent を使うと、crossdomain.xml を必要である事を宣言する事になるので、無い場合は画像が表示されなくなります

このサンプルでは、Image コントロールに表示される画像は伸縮されてものです。そのサイズのまま、PNG に変換して保存します。また、90度づつ回転して保存する方法も同時に書かれています

ソースコード


<?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[
// *********************************************************
// 【Papervision3D_2.1.920.swc】
// Application の paddingTop と paddingBottom のデフォルト
// は 24 なので注意
// ( 大きさは、HTML 側で決めています )
// *********************************************************

	import mx.formatters.*;
	import mx.graphics.codec.*;
	
	//papervision3Dクラスをインポート
	import nochump.util.zip.*;

	private var saveRef:FileReference;
	private var bmp:BitmapData;
	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( "保存完了" );
				// メモリ開放
				bmp.dispose();
			}
		);

		// イベント登録
		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 saveFile():void {

		try {
			// ビットマップデータを作成
			bmp = new BitmapData(
				imageCheck.content.width, imageCheck.content.height
			);
			// ビットマップデータに画像を描画
			bmp.draw(imageCheck.content);
			// PNG 変換クラス
			var enc:PNGEncoder = new PNGEncoder();
			// ビットマップデータを PNG に変換
			png = enc.encode(bmp);
		}
		catch( e:Error ) {
			firebug( e );
		}

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

	}

	// *********************************************************
	// 保存
	// ※ Image オブジェクトに格納された画像の本来の大きさと
	// ※ 縮小された見た目の大きさで保存
	// *********************************************************
	public function saveZipfile():void {

		// ■ オリジナルサイズ
		// ビットマップデータを作成
		bmp = new BitmapData(imageCheck.content.width, imageCheck.content.height);
		// ビットマップデータに画像を描画
		bmp.draw(imageCheck.content);
		// ビットマップデータを PNG に変換
		png = enc.encode(bmp);

		// メモリ書庫作成
		var zo:ZipOutput = new ZipOutput();

		// オリジナルサイズの画像
		var ze:ZipEntry = new ZipEntry("save_normal.png");
		zo.putNextEntry(ze);
		zo.write( png );
		zo.closeEntry();

		bmp.dispose();

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

		// 表示サイズの画像
		ze = new ZipEntry("save_s0.png");
		zo.putNextEntry(ze);
		zo.write( png );
		zo.closeEntry();

		bmp.dispose();

		var matrix:Matrix = null;

		// ■ 表示サイズ時計まわり90度回転
		// ビットマップデータを作成
		matrix = new Matrix();
		matrix.rotate(Math.PI/2);
		matrix.translate( imageCheck.contentHeight, 0 );

		bmp = new BitmapData(imageCheck.contentHeight, imageCheck.contentWidth );
		// ビットマップデータに画像を描画
		bmp.draw(imageCheck,matrix);
		// ビットマップデータを PNG に変換
		png = enc.encode(bmp);

		// 表示サイズの画像
		ze = new ZipEntry("save_s90.png");
		zo.putNextEntry(ze);
		zo.write( png );
		zo.closeEntry();

		bmp.dispose();

		// ■ 表示サイズ時計まわり180度回転
		// ビットマップデータを作成
		matrix = new Matrix();
		matrix.rotate(Math.PI);
		matrix.translate( imageCheck.contentWidth, imageCheck.contentHeight );

		bmp = new BitmapData(imageCheck.contentWidth, imageCheck.contentHeight);
		// ビットマップデータに画像を描画
		bmp.draw(imageCheck,matrix);
		// ビットマップデータを PNG に変換
		png = enc.encode(bmp);

		// 表示サイズの画像
		ze = new ZipEntry("save_s180.png");
		zo.putNextEntry(ze);
		zo.write( png );
		zo.closeEntry();

		bmp.dispose();

		// ■ 表示サイズ時計まわり270度回転
		// ビットマップデータを作成
		matrix = new Matrix();
		matrix.rotate((Math.PI*3)/2);
		matrix.translate( 0, imageCheck.contentWidth );

		bmp = new BitmapData(imageCheck.contentHeight, imageCheck.contentWidth);
		// ビットマップデータに画像を描画
		bmp.draw(imageCheck,matrix);
		// ビットマップデータを PNG に変換
		png = enc.encode(bmp);

		// 表示サイズの画像
		ze = new ZipEntry("save_s270.png");
		zo.putNextEntry(ze);
		zo.write( png );
		zo.closeEntry();

		bmp.dispose();

		var ba:ByteArray = new ByteArray();

		ba.writeMultiByte("この文字列はSHIFT_JIS(CRLF)です","shift_jis");
		ba.writeByte(0x0d);
		ba.writeByte(0x0a);
		ba.writeMultiByte("日本語表示","shift_jis");
		ba.writeByte(0x0d);
		ba.writeByte(0x0a);

		ze = new ZipEntry("readme_sjis.txt");
		zo.putNextEntry(ze);
		zo.write( ba );
		zo.closeEntry();

		ba.clear();
		ba.writeUTFBytes("この文字列はUTF-8(LF)です");
		ba.writeByte(0x0a);
		ba.writeUTFBytes("日本語表示");
		ba.writeByte(0x0a);

		ze = new ZipEntry("readme_utf8n.txt");
		zo.putNextEntry(ze);
		zo.write( ba );
		zo.closeEntry();

		zo.finish();

		saveRef.save( zo.byteArray, "save.zip" );

	}

]]>
</mx:Script>

<mx:Panel
	title="Papervision3D_2.1.920 の nochump.util.zip の利用"
	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="Image=>画像保存"
		click="saveFile();"
		width="200"
		enabled="false"
	/>
	<mx:Button
		id="saveButton2"
		label="Image=>ZIP保存"
		click="saveZipfile();"
		width="200"
		enabled="false"
	/>

	<mx:Image
		id="imageCheck"
		width="200"
		height="200"
		
	/>
	
</mx:Panel>

</mx:Application>