Tender Surrender

超カンタン!HTML5 で GIF アニメを作る方法

知っている人は知っている方法だと思いますが、実際にやってみたのでメモ。
※ デモの画像はこちらからお借りしました。特にライセンスが記述されていなかったのですが、問題があれば差し替えます。





ライブラリは jsgif というのを使わせて頂きました。
手順はライブラリを読み込み、画像をひとコマ分ずつcanvasにロード、ライブラリに追加。終わったらバイナリからgifファイルを生成、という感じ。

もう少し詳しい解説は以下。
  1. LZWEncoder.js NeuQuant.js GIFEncoder.js を読み込む
  2. 適切なサイズの canvas を用意
  3. GIFEncoder からエンコーダを作る
    var encoder = new GIFEncoder();
  4. アニメーションの時間間隔などを encoder に設定
    encoder.setRepeat(0);
    encoder.setDelay(100);
    encoder.setSize(120, 120);
  5. 一コマずつ書き始める
    encoder.start();
    1. canvas に絵を書く
      canvas.drawImage(img);
    2. encoder に canvas のコンテキストを追加することで一コマを追加
      encoder.addFrame(ctx);
  6. 書き込み終了
    encoder.finish()
  7. encoder からバイナリを吐き出して、Blobを作る
    var bin = new Uint8Array(encoder.stream().bin);
    var blob = new Blob([bin.buffer], {type: ‘image/gif’});
  8. Blob から URL を作って表示 (revoke を忘れずに)
    var url = URL.createObjectURL(blob);
    var image = new Image();
    image.src = url;
    image.onload = function() {
     URL.revokeObjectURL(url);
    };
デモはこの辺に。

※ このデモは Firefox 推奨です。Chrome では img.onload で実際に画像が読み込まれない場合があるというバグのせいで、アニメーションが一部抜けたりしてしまいます。画像を読み込むのにAjaxを使うなどの回避方法はあるのですが、このデモでは可読性を優先して画像をsrcから読み込む方法を採りました。ただ、僕のコードにバグがある可能性もあるので、その場合はこっそり教えて下さい :)
こっそりじゃないけど Google+ で教えてもらいました。完全に僕の勘違いでした。お恥ずかしい・・・。


参考:

結局 PWA は来るの?来ないの?

「PWAが来るって言っているエンジニアは今すぐ辞めろ」に対するアンサーソングです Continue reading

comments powered by Disqus