導入
今日はハロウィンなので、GoogleのHPではまた新たなDoodleが更新しました。
今回のDoodleはハスキーオオカミがバスケをやっているのがあって、とても面白いと思って、つい録画しようと思いました。
方法
DOM要素の調査
調査してわかったのは、このアニメーションはid="hpcanvas"というCanvasが出しているのがわかりました。
キャプチャーを撮る
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枚のキャプチャーがあるはずです。
Gifに変換
PNGをGifに繋ぐサービスは多数存在しますが、私は適当にこちらのサイトを使いました。
不要のフレームを削除して、サイトにアップロードします。先ほどサンプリングする際は100msごと一枚(10fps)でしたので、Animation speedを 100 milliseconds にすればいいです。
以上、今回のレポートでした。