APNGを扱う

点群PNGファイルが将来APNGに拡張される可能性があることを見込んでAPNGをJavaScriptで扱う方法を調べた。

APNGのファイル自体を直接canvasに書き込むと単なる静止画としてしか読み取れない（最初のフレームか）。基本的にはバイナリで読み、チャンクでフレームごとに切り取るしかなさそうな印象。ライブラリを調べたところメジャーなところでapng-canvas、同等機能を持っていそうなapng-jsを見つけた。

• apng-canvas
  npmではtypescript版しかなさそうな感じ。
• apng-js
  普通にnpmで取得OK。

apng-jsはドキュメントを読んでなんとなく各フレームの取得方法がわかったが、apng-canvasはよくわからずサンプルを探したところこのページを見つけた。

APNG.parseURL( 'sample.png' ).then(
  ( anim ) => {
    console.log( anim.frames );
  }
);

anim.framesに各フレームの情報があるらしい。GitHubを見直したらLow-level methodsとして記述してあるメソッドの一つが使われていた。arraybufferから読み取るparseBufferというメソッドもある。一番メジャーであり特に使い勝手に問題なければapng-canvasか、もしくはapng-jsのほうが単機能で使い勝手が良いかもしれない。