5

前奏曲

私の Web アプリケーション (キーワード: HTML、JavaScript、jQuery;動作環境: IE8+、Chrome、FF) は、一種の WebCam からのライブ画像データを提示する必要があります。この「WebCam」は、ライブ画像データを として提供する Web サーバーを統合しBMPます。

タグのsrc属性を設定することで、画像データを「ダウンロード」します。img

問題

画像データをクライアント側で解析したい。XMLHttpRequestそのためには、 （この提供された stackoverflow answerを使用して）画像を事前にダウンロードし、後でタグのsrc属性を更新したいと思います。ブラウザは、経由でダウンロードしたキャッシュされた画像データを使用する必要imgがあると理解しています。XMLHttpRequest

問題は、ブラウザー (IE8+、FF、および Chrome) がサーバーに別の要求を発行して、画像を再度ダウンロードすることです (つまり、キャッシュされたデータを使用しないか、データが最初からキャッシュされていません)。

別のリクエストを発行する代わりに、ブラウザーがデータをキャッシュして使用できるようにするにはどうすればよいですか?

付録

サーバーはCache-Control: max-age=5, public、Chromeの場合は を送信し、Cache-Control: no-store, max-age=5他のすべてのブラウザの場合は を送信します。

Chromeでは、304 Not Modified. ブラウザはキャッシュされた画像を使用します。他のすべての (前述の) ブラウザーでは、これは機能しません。

更新 1

データ URI スキームを使用して属性を更新できることはわかっています。ただし、これは IE8 では機能しません (上記の要件を参照)。IE8 は最大 32KB でしかサポートしないためです。src

4

1 に答える 1

3

明らかなことをして問題を解決しました：

  1. hidden img(設定によるsrc) firstを介して画像をリクエストします。そうすれば、画像はブラウザによってキャッシュされます。

  2. その後、AJAX 経由で画像のバイナリ データを要求します。ブラウザは上記のキャッシュされたデータを使用するため、別のリクエストを発行することなく画像データを分析できます。

  3. src「可視」画像の を更新します。

そうすれば、必要なことを達成できます。画像を2回リクエストすることなく、事前のデータ分析で「ライブ」画像を表示できます。

于 2013-11-07T07:32:45.467 に答える