swf2jsでswfを直接分解してcanvasに出力する #JavaScript

swfのバイナリをJavaScriptで読み込んでバイナリ分解してcanvasに出力したい。

完成品

ienaga/swf2js

SWF仕様書

SWFの仕様書が公開されているので仕様書を見ながら分解する。

SWF File Format Specification

SWF Investigator

分解された状態を確認できる。便利。

Adobe SWF Investigator

swfを読み込む

var xmlHttpRequest = new XMLHttpRequest();

xmlHttpRequest.open('GET', url);

// XMLHttpRequest2が使えるなら使う
isXHR2 = typeof xmlHttpRequest.responseType != 'undefined';

if (isXHR2) {
    xmlHttpRequest.responseType = 'arraybuffer';
} else {
    xmlHttpRequest.overrideMimeType(
        'text/plain; charset=x-user-defined'
    );
}

xmlHttpRequest.send(null);

xmlHttpRequest.onreadystatechange = function()
{

    var readyState = xmlHttpRequest.readyState;

    if (readyState == 4) {

        var status = xmlHttpRequest.status;

        switch (status) {

            case 200:

                // 分解の実装
                parse(isXHR2 ? xmlHttpRequest.response : xmlHttpRequest.responseText, player.parent);
                ...省略
                break;

            case 404:
                alert('Swf Data Not Found');
                break;

            case 500:
                alert('Internal Server Error');
                break;

        }
    }
}

バイナリの分解

取得できたバイナリを分解・・・

いやいや、こんなの無知な状態から勉強開始しても全然意味不明すぎる・・・

って事で、バイナリの達人yoyaさんの「swfpl」の「bitio.js」を使って勉強させて頂きます！

yoya/swfpl

XMLHttpRequest2に対応していなければバイナリのデータを0から255の数値に変換する
型付き配列(Typed Array)に対応している端末ならTyped Arrayを使用する。

bitio.js

    /**
     * BitIO
     * @constructor
     */
    var BitIO = function()
    {
        this.data = null;
        this.bit_offset = 0;
        this.byte_offset = 0;
        this.bit_buffer = null;
    };

    /**
     * init
     * @param binary
     */
    BitIO.prototype.init = function(binary)
    {
        var _this = this;
        var length = binary.length;
        var array = _this.createArray(length);
        var key = 0;
        for (; length--;) {
            array[key] = binary.charCodeAt(key++) & 0xff;
        }
        this.data = array;
    };

    /**
     * createArray
     * @param length
     * @returns {Array}
     */
    BitIO.prototype.createArray = function(length)
    {
        return (window.ArrayBuffer) ? new Uint8Array(length) : [];
    };

    ...省略