Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@n0bisuke

JavaScriptでGIF画像生成メモ #twilio_online_contest_2021

Twilio WebRTCハンズオン(ホワイトボード編)お絵描きしたものをGIF画像にしてみたいなぁと思って試しました。

JSGIF

jsgifというライブラリを使ってGIF画像生成をしてみました。

JavaScriptでjsgifを使ってアニメーションGIFを動的生成する

こちらからDLしたフォルダを解凍して

  • b64.js
  • LZWEncoder.js
  • NeuQuant.js
  • GIFEncoder.js

を利用します。

コード全文

今回、GIT画像化したいpngファイルを7枚用意しました。

コードはほぼ参考サイトのままですが、微修正しています。

JavaScriptでjsgifを使ってアニメーションGIFを動的生成する

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のハッカソンで触ってみたので忘れないうちにメモしておきました。

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
5
Help us understand the problem. What is going on with this article?