LoginSignup
9
3

JS直書きでGoogle DoodleのCanvasを録画してGifに

Last updated at Posted at 2019-10-31

導入

今日はハロウィンなので、GoogleのHPではまた新たなDoodleが更新しました。
今回のDoodleはハスキーオオカミがバスケをやっているのがあって、とても面白いと思って、つい録画しようと思いました。

Webp.net-gifmaker (2).gif

方法

DOM要素の調査

調査してわかったのは、このアニメーションはid="hpcanvas"というCanvasが出しているのがわかりました。

2019_年ハロウィン_🔊.png

キャプチャーを撮る

CanvasからGifに変換するライブラリーは多数ありますが、私がいくつか試したところ、Chrome Consoleでの操作がには適していないようで、いっそう直書きにしました。
動画とは静止画の連続なので、Canvasアニメをサンプリングして静止画のフレームをキャプチャーして、繋げていけば目的が達成できると考えていました。

今回はそんなに大量に作成しなくていいと思い、100ms間隔で100枚(10fps * 10s)キャプチャーを撮り、blob urlをリストに保存するよう作りました。

const array = []
let i = 0
const recorder = setInterval(() => {
  if (i < 100) {
    canvas.toBlob(blob => {
      array.push(window.URL.createObjectURL(blob));
    })
    i ++;
  } else {
    console.log(array);
    clearInterval(recorder);
  }
}, 100);

上記SnippetをChrome Consoleに流した瞬間、アニメーションのスタートボタンを押せば、録画が開始します。
録画が終ったとき、キャプチャーのURLリストが出力されます。

キャプチャーをダウンロード

今回は100枚のフレーム(キャプチャー)をローカルにダウンロードして、Gifとして繋ぎ直す予定でしたので、まずダウンロード用のダミー<a>タグを作ります。

const a = document.createElement("a");
a.style = "display: none";
document.body.appendChild(a);

そして、先ほどできたblob urlから、キャプチャーをダウンロードします。ブラウザが劇重いになりそうなので、一枚ダウンロードして100ms Sleepをさせています。
また、ファイル名を連番つけないと、後ほどいろいろ苦労しちゃうので、ちゃんと連番もつけます。

(async () => {
  let i = 0
  for (const url of array) {
    a.href = url;
    a.download = `google-${i}.png`;
    a.click();
    i ++;
    await new Promise(r => setTimeout(r, 100));
  }
})();

ダウンロード終えた時、ローカルに100枚のキャプチャーがあるはずです。
名称未設定フォルダ.png

Gifに変換

PNGをGifに繋ぐサービスは多数存在しますが、私は適当にこちらのサイトを使いました。
不要のフレームを削除して、サイトにアップロードします。先ほどサンプリングする際は100msごと一枚(10fps)でしたので、Animation speed100 milliseconds にすればいいです。

以上、今回のレポートでした。

参考

9
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
3