3

オフスクリーンを使用してcanvas、特定の変数のランタイム値に基づいて特定の画像を動的に生成します。画像がオフスクリーン キャンバスに描画されたら、それを取得して、Web アプリケーションのいくつかの場所で使用したいと考えています。

戦略 1:オフスクリーン キャンバスのtoDataURL()メソッドを使用data:して、画像を含む URIを取得し、imgそれを表示するページ内の複数の要素にプログラムで設定できます。

戦略 2:オフスクリーン キャンバスのgetImageData()メソッドを使用してImageDataインスタンスを取得します。img要素を要素に置き換えて、それらcanvasを呼び出しputImageData()ます。

メモリに関してより効率的な戦略はどれですか? どちらがより「慣用的」ですか? 表示された画像のインスタンスを保持するために必要なメモリが重複しないようにしています。他の提案？

4

1 に答える 1

5

img 要素の代わりに canvas 要素を使用します。

次に、メモリ内キャンバスを画面上のキャンバスに描画します。canvas 要素は、別の canvas を drawImage ソースとして使用できます。

context.drawImage(inMemoryCanvasElementReference,0,0);

ところで、imageData コマンド (.getImageDataおよび.putImageData) は、まったく新しいピクセル データの配列を作成するため、メモリ効率が非常に悪くなります。また、GPU で高速化されていないため、パフォーマンスも不足しています。

于 2015-10-21T14:49:28.020 に答える