Everyday Pieces ::
  • Webサービス
  • ブログパーツ
  1. ホーム
  2. プログラミング

GIFをparseするjsなライブラリ(4)

2019年1月12日 プログラミング gif.js

 先日、
とある切っ掛けで前回の投稿を見たりしたのですが、
妙なことに気が付きました。
「なぜ、コールバックをプロパティにしたのだろうか」と。

 まぁ、
こういうのも無くはないのでしょうが、
コールバックはparse時にしか意味はないので、
プロパティにするのは実装的に如何なものかと(^_^;)
我ながら何故こういう作りにしてしまったのか、よく覚えてない。

 ともあれ、
個人的に何か気持ち悪いので(^_^;)
コールバックはparse時に渡すように変えました。

 ということで、
サンプルなソースコードの例は以下のように変わります。
何度も変えてスイマセン(^_^;)
GIFファイルを読み込んだ array buffer と
canvas なDOMを渡せばOKです。

function animateGIF(arrayBuffer,canvas) {
    var gif,context,frames,idx,delay,lastTime;

    gif = new Gif();
    gif.parse(arrayBuffer,
        function() { // on parse
            start();
        },
        function(e) { // on error
            alert(e);
        },
        function(e) { // on progress
            console.log('Parsing...' + ((100 * e.loaded / e.total)|0) + '%');
        }
    );

    function start() {
        canvas.width = gif.header.width;
        canvas.height = gif.header.height;
        context = canvas.getContext('2d');
        frames = gif.createFrameImages(context,true); // pre-rendering
        idx = 0;
        delay = 0;
        draw(); // first draw
        if (frames.length > 1) {
            setTimeout(function() { // setTimeoutはあえてやらなくてもよいかも。
                lastTime = performance.now();
                tick(lastTime);
            },0);
        }
    }

    function draw() {
        var frame = frames[idx];
        delay += frame.delay * 10; // 1/100sec to millisec
        context.putImageData(frame.image,frame.left,frame.top);
    }

    function tick(time) {
        var delta = time - lastTime;
        lastTime = time;
        delay -= delta;
        if (delay <= 0) {
            idx = (idx+1) % frames.length;
            draw();
        }
        requestAnimationFrame(tick);
    }
}

 拙作のライブラリを使って、
作ってみたツールはこちらから試せます。
ライブラリのダウンロードも行えます。

関連記事
自サイトの壁紙を自動生成するようにしてみた(実験的) GIFをparseするjsなライブラリ(3) GIFをparseするjsなライブラリ(2) GIFをparseするjsなライブラリ

コメントする キャンセル

アドレスが公開されることはありません。が付いている欄は必須項目です。

投稿ナビゲーション

あけおめ2019
KB4487017で0x800f0922なエラー

カテゴリー

WordPress つぶやき トピック プログラミング

タグ

AS3 enchant.js FamilyTreeVis Flash Geolocation gif.js kinect Linux MMD MoneyTrackNote notifier.js OpenCV PDFカレンダー RISC-V three.js セキュリティ テーマ自作 ブログパーツ 動物 動画 麻雀

アーカイブ

© katwat