htmlで通信なしにGIFアニメを作成したい。
そこで jsgif というライブラリがあったので使ってみた。
ダウンロード＆解凍したらhtmlにリンクを追加。
|
1 2 3 4 |
<script src="js/b64.js"></script> <script src="js/LZWEncoder.js"></script> <script src="js/NeuQuant.js"></script> <script src="js/GIFEncoder.js"></script> |
読み込み終わったら次のようなスクリプト記述でGIFアニメが作れる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var cvs = document.getElementById('canvas'); var ctx = cvs.getContext("2d"); var encoder = new GIFEncoder(); encoder.setRepeat(0); //auto-loop encoder.setDelay(800);//interval(ms) encoder.start(); //doSomething encoder.addFrame(ctx); //doSomething encoder.addFrame(ctx); //doSomething encoder.addFrame(ctx); encoder.finish(); document.getElementById('outImg').src = 'data:image/gif;base64,'+encode64(encoder.stream().getData()); |
addFrameでcontext要素を変えながら追加していくとGIFアニメになる。
オプションの１つで指定した色を透明として扱うこともできる。
encoder.setTransparent(0x0000FF);
しかしコレはそのままでは使えなかった。
GIFEncoder.js の以下部分を変更。
|
1 2 3 4 5 |
//Before var index = i / 3; //After var index = Math.floor(i / 3) ; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//Before if (transparent !== null) { transIndex = findClosest(transparent); } //After if (transparent !== null) { transIndex = findClosest(transparent); var r = colorTab[transIndex*3]; var g = colorTab[transIndex*3+1]; var b = colorTab[transIndex*3+2]; var trans_indices = []; for (var i=0; i<colorTab.length; i+=3) { var index = i / 3; if (!usedEntry[index]) continue; if (colorTab[i] == r && colorTab[i+1] == g && colorTab[i+2] == b) trans_indices.push(index); } for (var i=0; i<indexedPixels.length; i++) if (trans_indices.indexOf(indexedPixels[i]) >= 0) indexedPixels[i] = transIndex; } |
これで指定した色が透明になる。
位置を変えながらfillTextすると次のようなGIFアニメが作れた。
これを使ってまたなんか作ってみよう。