6

質問

JavaScript を使用して Web ブラウザーで画像を再生/操作するための効率的なコードを書きたいと考えています。ビデオファイルを使用すると、http リクエストが削減される可能性があると思います。ビデオから単一フレームの png/jpg/バイトコード バージョンにアクセスするにはどうすればよいですか?

バックグラウンド

現在、私のページですばやくアクセスできるようにする必要がある、わずかに変化する 1000 個までの一連の画像があります。HTTP リクエストを介して画像をロードするのは (明らかに) 永遠にかかります。私のアプリが成長するにつれて、この数は 1000 から 5000 から 10,000 に増加する可能性があります ...

個々の画像に対する Ajax リクエストは機能しません。b/c 画像をすぐにロードする必要があります (また、新しい http リクエストを待つ時間がありません)。

私のアイデアは、画像の進行を示すサーバー上のビデオファイルを前処理することでした-フレームごとに1つの画像-ダウンロードの速度とブラウザーのパフォーマンスを高速化します。このビデオは、オンラインでビデオを視聴する速度に基づいて、クライアントにすばやくダウンロードできると思います. ビデオからフレームの画像コンテンツを取得する方法に行き詰まっています。

HTML5?

HTML5 についてはまだ調べていませんが、参考になるかどうか検討したいと思います。

4

2 に答える 2

14

ビデオ フレームを html5 キャンバスに描画できます。

thisとthisを組み合わせて、このフィドルを作成しました。

重要なポイントは、現在のビデオ フレームを取得し、キャンバス要素に描画することです。

var delay=20;
function draw(cvideo,ccanvas,canvas_width,canvas_height) {
  if(cvideo.paused || cvideo.ended) return false;
  ccanvas.drawImage(cvideo,0,0,canvas_width,canvas_height);
  setTimeout(draw,delay,cvideo,ccanvas,canvas_width,canvas_height);
}

キャンバスに入れた後は、画像に対してほとんど何でもできます。

于 2012-04-15T18:49:54.700 に答える
2

ビデオ ファイルを使用する代わりに、画像スプライトを使用できます。基本的に、複数の画像を 1 つの大きな画像に結合します。その中から適切な領域のみを常に表示します (すべての画像が同じサイズであると仮定すると、これは簡単です)。必要な HTTP リクエストの数を減らし、ロード プロセスを高速化します。

于 2012-04-15T18:31:08.337 に答える