データURLを無効にするjpgキャッシュ

Question

私はbase64でエンコードされたjpgファイルを一定のソースに保存しており、1秒間に約1〜5枚の画像が簡単なビデオストリームを作成します。これは、彼らがどのように見えるかです：img要素のsrc atributeにそれらを入力

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg== 

は、ブラウザによってキャッシュされているバックグラウンドで要求をトリガー：

すべてのフレームは、私がキャッシュされているので、短い時間の後にアプリがブラウザのキャッシュに入ります。

1. すべてのフレームが実際に短い時間キャッシュされたりキャッシュされたりしないように、このキャッシュ動作を回避するにはどうすればよいですか？
2. それができない場合、どのようにしてストリームから合理的に高速で来るjpgバイナリデータをキャッシングせずに表示できますか？

*あなたがそれを行うことができます

Answer 1

時間とCPU消費の面で、私は生のピクセルに生のバイナリJPGデータをデコードし、キャンバス上でそれらをレンダリングするためにjpg.jsを使用してみましたが、それはあまりにも高価である - それはですトリッキーですが、可能です。これは、converting dataURI to Blobを含み、次に、objectURLにブロブを含む。私は1つの画像で例を用意しましたが、多くのことができます。別のURLが作成されるたびに、キャッシングは行われません。

私の例：

https://jsbin.com/tuxoveroha/edit?html,outputちょうどメモリを解放するために、URLで行わときにrevokeObjectURLを使用してください。