めも

モバイルAIRでカメラ撮影した写真をmultipart/form-dataでWebにアップする流れのメモ。
写真がbitmapDataという段階からスタート。

// Jpeg 変換
var byteArray:ByteArray = new ByteArray();
bitmapData.encode(bitmapData.rect, new flash.display.JPEGEncoderOptions(), byteArray);

// Base64 変換
var base64Encoder:Base64Encoder = new mx.utils.Base64Encoder();
base64Encoder.encodeBytes(byteArray);

// POSTデータ作成
var formBuilder:MultipartFormDataBuilder = new jp.psyark.net.MultipartFormDataBuilder("207542376適当");
formBuilder.addPart("apiKey", "123456ホゲ");
formBuilder.addPart("inputFile", byteArray, "dummyName.jpg", true);

var urlRequest:URLRequest = new URLRequest(url);
formBuilder.configure(urlRequest);

var urlLoader:URLLoader = new URLLoader();
// ここらでイベントリスナーの追加処理。
urlLoader.load(urlRequest);

問題はPOSTデータの作成のところ。
http://www.libspark.org/wiki/psyark/MultipartFormDataBuilder
にあるMultipartFormDataBuilderを利用しましたが、うまくいきませんでした。
そんなとき、[AS3] PHPとAS3の連携　multipart/form-dataでデータのアップロード http://www.kuma-de.com/blog/2010-10-07/2352 が大変参考になりました。

ただ、このサイトのMultipartFormDataBuilder.asでもまだ動きませんでした。結論としては、追記にある最後のバウンダリの問題が原因でした。そこで、addPartの第4引数 last を追加して、バウンダリの最後に「–」が追加されるように修正しました。受け取り側をphpで実装した場合は、必要なかったです。javaのtomcatだと最後の「–」が必要でした。

理想的な修正は、configure()実行時に「–」を追加することかな。最後かどうかはコード側で勝手に判断してくれれば十分ですね。あと、Content-Type:もベタ書きも直さないと思いつつそのままw

package jp.psyark.net {
	import flash.net.URLRequest;
	import flash.net.URLRequestMethod;
	import flash.utils.ByteArray;
	
	/**
	 * multipart/form-dataのリクエストを作成するための簡単なクラスです。
	 */
	public class MultipartFormDataBuilder {
		protected var _boundary:String;
		protected var byteArray:ByteArray;
		
		/**
		 * コンストラクタです。
		 * 
		 * @param boundary バウンダリ（境界線）文字列です。送信する他のデータ中に出現しない文字列である必要があります。
		 */
		public function MultipartFormDataBuilder(boundary:String) {
			_boundary = boundary;
			byteArray = new ByteArray();
			addBoundary();
		}
		
		/**
		 * パート（部分）を追加します。
		 * 
		 * @param name このパートの名前です。content-dispositionヘッダのname属性に使われます。
		 * @param data このパートのデータです。ByteArray以外の値は文字列として評価されます。
		 * @param filename このパートのファイル名です。null以外の値を渡した場合、content-dispositionヘッダのfilename属性に使われます。
		 * @param last 最後のパートの時だけtrueにする。バウンダリに最後を意味する--を追加する。
		 */
		public function addPart(name:String, data:*, filename:String=null, last:Boolean = false):void {
			byteArray.writeUTFBytes('Content-disposition: form-data; name="' + name + '"');
			if (filename != null) {
				byteArray.writeUTFBytes('; filename="' + filename + '"');
				byteArray.writeUTFBytes("\r\n");
				byteArray.writeUTFBytes("Content-Type: image/jpeg"); //JPEG用
			}
			byteArray.writeUTFBytes("\r\n\r\n");
			if (data is ByteArray) {
				byteArray.writeBytes(data);
			} else {
				byteArray.writeUTFBytes(data);
			}
			byteArray.writeUTFBytes("\r\n");
			addBoundary(last);
		}
		
		/**
		 * multipart/form-dataのリクエストとして使えるように、URLRequestを設定します。
		 */
		public function configure(request:URLRequest):void {
			request.method = URLRequestMethod.POST;
			request.data = byteArray;
			request.contentType = "multipart/form-data; boundary=" + _boundary;
		}
		
		private function addBoundary(last:Boolean = false):void {
			if (last) {
				byteArray.writeUTFBytes("--" + _boundary + "--\r\n");
			} else {
				byteArray.writeUTFBytes("--" + _boundary + "\r\n");
			}
		}
	}
}

Flash Player 11.3 以降、BitmapDataにencodeメソッドが追加されました。
これを利用したBitmapDataのJpegやPNGへの変換方法をメモ。

var bitmapData:BitmapData = new BitmapData(100, 100, false, 0xED1A3D);
var byteArray:ByteArray = new ByteArray();
bitmapData.encode(bitmapData.rect, new flash.display.PNGEncoderOptions(), byteArray);

これで、byteArrayに変換後のデータが入ります。

bitmapData.encode()の第2引数を変えることによって、JPEGやJPEGXRにもできます。
以下の３種類

• PNGEncoderOptions
• JPEGEncoderOptions
• JPEGXREncoderOptions

以下、wonderflにFlash Player 11.3以前のやり方のサンプルがあったので、forkして追加してみました。

BitmapDataのPNG, Jpeg, JpegXRへの変換 – wonderfl build flash online

// forked from kihon's flash on 2010-4-24
package
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.FileReference;
    import flash.utils.ByteArray;
    import mx.graphics.codec.PNGEncoder;
    import mx.graphics.codec.JPEGEncoder;
    import com.bit101.components.PushButton;
    
    public class Main extends Sprite
    {    
        private var canvas:BitmapData;

        public function Main()
        {
            canvas = new BitmapData(100, 100, false, 0xED1A3D);
            var bitmap:Bitmap = new Bitmap(canvas);
            addChild(bitmap);
            bitmap.x = 182;
            bitmap.y = 182;
            
            new PushButton(this, 182, 282, "旧方式 save(PNG)", onMouseClick);
            new PushButton(this, 182, 302, "旧方式 save(JPEG)", onMouseClick2);
            new PushButton(this, 182, 322, "FP11.3以降 save(PNG)", onMouseClick3);
            new PushButton(this, 182, 342, "FP11.3以降 save(JPEG)", onMouseClick4);
            new PushButton(this, 182, 362, "FP11.3以降 save(JPEGXR)", onMouseClick5);
        }

        private function onMouseClick(event:Event):void 
        {
            var ba:ByteArray = new PNGEncoder().encode(canvas);
            new FileReference().save(ba, "t.png");
        }
        
        private function onMouseClick2(event:Event):void 
        {
            var ba:ByteArray = new JPEGEncoder().encode(canvas);
            new FileReference().save(ba, "t.jpeg");
        }
        
        private function onMouseClick3(event:Event):void {
            var ba:ByteArray = new ByteArray();
            canvas.encode(canvas.rect, new flash.display.PNGEncoderOptions(), ba);
            new FileReference().save(ba, "t2.png");
        }
        private function onMouseClick4(event:Event):void {
            var ba:ByteArray = new ByteArray();
            canvas.encode(canvas.rect, new flash.display.JPEGEncoderOptions(), ba);
            new FileReference().save(ba, "t2.jpeg");
        }
        private function onMouseClick5(event:Event):void {
            var ba:ByteArray = new ByteArray();
            canvas.encode(canvas.rect, new flash.display.JPEGXREncoderOptions(), ba);
            new FileReference().save(ba, "t2.jxr");
        }
    }
}