超カンタン！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+ で教えてもらいました。完全に僕の勘違いでした。お恥ずかしい・・・。

ソースコードはこちら。

参考：

• JavaScript

• pure JavaScriptでアニメーションGIFを作る