HTML キャンバスでいくつかのデータを視覚化しようとしていますが、これに似た問題に直面しています。つまり、データのサイズがキャンバスのサイズと正確に一致しません。
ある例では、幅 100px のキャンバスに 1024 ポイントの信号をプロットしたいと考えています。(例: オーディオ波形。)
別の例では、高さ 100 ピクセル、幅 500 ピクセルのキャンバスに 1024 x 5000 のポイント マトリックスを表示したいと考えています。(例: オーディオ スペクトログラム。)
どちらの場合も、キャンバスに収まるようにデータを再サンプリングする必要があります。これを行うことができるJavascriptのライブラリ/ツールキット/関数を知っている人はいますか?
** 編集 **
ここで使用できる多くのテクニックがあることを認識しています。1 つの可能性は、単にデータ ポイントを破棄または複製することです。これはピンチの場合に役立ちますが、破棄/複製により、「ギザギザ」または「ブロック状」に見える傾向がある結果が生成されることが知られています (こことここを参照)。Lanczos、双一次または双三次リサンプリングなどのより滑らかな画像を出力する、もう少し洗練されたアルゴリズムを使用することをお勧めします。これらのどれもが私のニーズを満たすでしょう。
私の質問は、どのアルゴリズムを使用するかではなく、それらのいずれかがオープンソースの JavaScript ライブラリに実装されているかどうかです。驚いたことに、私は JS で多くを見つけることができませんでした。独自のリサンプリング関数をコーディングすることは明らかにオプションですが、最初に SO コミュニティに確認して、車輪を再発明していないことを確認したかったのです。
（この回答は、データ配列ではなくキャンバスオブジェクトで直接動作することを除いて、私が望むものに非常に近いコードリストを提供し、入力と出力のアスペクト比を強制的に同じにします。他に何もない場合利用可能で、間違いなくこれで作業できますが、Matlab のresampleのラインに沿って、もう少し一般的で柔軟なソリューションを望んでいました。)