javascriptとas3で連携してswfのキャプチャ画像を取得する方法

swfを好きなタイミングでキャプチャを撮ってローカルに保存するってことがあったのでメモ

sample.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
               creationComplete="creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.graphics.codec.PNGEncoder;
            import mx.utils.Base64Encoder;

            /**
             * 初期化完了イベント
             * @param event
             */
            protected function creationCompleteHandler( event:FlexEvent ):void {
                // JSから呼ぶときの名前を登録
                ExternalInterface.addCallback( "getCapture", capture );
            }

            /**
             * 画面のキャプチャを生成する
             * @return base64エンコードした画像データ
             */
            private function capture():String {
                // DisplayObjectをBitmapDataに描画
                var bmpd:BitmapData = new BitmapData( this.width, this.height );
                bmpd.draw( this );

                // Base64でエンコード
                var base64:Base64Encoder = new Base64Encoder();
                base64.encodeBytes( new PNGEncoder().encode( bmpd ) );

                return base64.toString();
            }
        ]]>
    </fx:Script>
    <s:BorderContainer width="100" height="100" backgroundColor="0x00FF00" backgroundAlpha="0.5" verticalCenter="0" left="0"/>
    <s:BorderContainer width="100" height="100" backgroundColor="0xFF0000" backgroundAlpha="0.5" verticalCenter="0" right="0"/>
    <s:BorderContainer width="100" height="100" backgroundColor="0x0000FF" backgroundAlpha="0.5" verticalCenter="0" horizontalCenter="0"/>
</s:Application>

}

ExternalInterface.addCallbackでJSからメソッドをコールできるようにするのがポイント。
jsから getCapture というメソッド名で呼び出すことができるようになる。

function capture(){
    var swf = document.sample;
    // ExternalInterface.addCallbackで登録したメソッドを呼び出す
    var str = swf.getCapture();

    var png = document.createElement('img');
    png.src = "data:image/png;base64," + str;
    png.width = 400;
    png.height = 300;

    document.appendChild(png);
}