Twilio WebRTCハンズオン（ホワイトボード編）お絵描きしたものをGIF画像にしてみたいなぁと思って試しました。
JSGIFの利用
jsgifというライブラリを使ってGIF画像生成をしてみました。
こちらからDLしたフォルダを解凍して
- b64.js
- LZWEncoder.js
- NeuQuant.js
- GIFEncoder.js
を利用します。
コード全文
今回、GIT画像化したいpngファイルを7枚用意しました。
コードはほぼ参考サイトのままですが、微修正しています。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GIF生成</title>
</head>
<body>
<div id="anime">
<img src="images/gif/1.png" width="80" />
<img src="images/gif/2.png" width="80" />
<img src="images/gif/3.png" width="80" />
<img src="images/gif/4.png" width="80" />
<img src="images/gif/5.png" width="80" />
<img src="images/gif/6.png" width="80" />
<img src="images/gif/7.png" width="80" />
</div>
<div>
<p><button id="create">アニメGIFを作成する</button></p>
<canvas id="canvas" style="display:none;"></canvas>
<img id="anime_gif">
</div>
<script src="jsgif/b64.js"></script>
<script src="jsgif/LZWEncoder.js"></script>
<script src="jsgif/NeuQuant.js"></script>
<script src="jsgif/GIFEncoder.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js
let encoder;
document.querySelector('#create').onclick = (event) => {
//canvasの取得
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
//GIFEncoderの初期処理
encoder = new GIFEncoder();
encoder.setRepeat(0); //繰り返し回数 0=無限ループ
encoder.setDelay(500); //1コマあたりの待機秒数（ミリ秒）
encoder.start();
//画像ファイル一覧を取得
frames = document.querySelectorAll('#anime img');
//canvasのサイズを1枚目のコマに合わせる
canvas.width = frames[0].naturalWidth;
canvas.height = frames[0].naturalHeight;
//全ての画像をcanvasへ描画
for (let frame_no = 0; frame_no < frames.length; frame_no++) {
ctx.drawImage(frames[frame_no], 0, 0);
encoder.addFrame(ctx); //コマ追加
}
//アニメGIFの生成
encoder.finish();
document.querySelector('#anime_gif').src = 'data:image/gif;base64,' + encode64(encoder.stream().getData());
}
よもやま
お絵描きしたCanvasから直接生成できるように出来るといいですよね。
取り急ぎ、#twilio_online_contest_2021のハッカソンで触ってみたので忘れないうちにメモしておきました。