画像を各ピクセルを表すdivに変換するさまざまな方法を試しています。
1つの方法は、php imagecoloratを使用して、background-colorうまく機能するdivを作成することです。
ただし、バックグラウンド位置がインクリメントされた同じcssを持つ数千のdivがある場合はどうなりますか？width:1px;height:1px;background-image
これはどのようなパフォーマンスヒットになりますか？つまり、ブラウザは画像全体を何度も描画しますか、それとも背景として表示されているセクションのみを描画しますか？元の画像は数百kbであることに注意してください。
ありがとう
画像の一部のみを描画する必要がありますが、描画操作はピクセル数の回数だけ呼び出されるため、パフォーマンスが低下します。テストコードを書いて、それがどのように機能するかを測定してみましたか？
ブラウザは各divを解析し、それをDOMに追加してからレンダリングする必要があるため、何千ものdivがパフォーマンスに悪影響を及ぼします。
実際のパフォーマンスは、ブラウザによって異なります。要求されている画像の一部のみが描画されますが、画像を描画するレンダリング関数はすべてのdivに対して呼び出されます。特定のブラウザの実装で画像の1ピクセルを高速にレンダリングできるか、文字列を解析して画像を印刷できるかは、多かれ少なかれ重要です。ブラウザに画像がメモリ内にある場合、違いは重要ではない可能性があります。しかし、ブラウザが毎回画像ファイルを開かなければならない場合、ディスクアクセスはあなたを殺します。
そうは言っても、私はあなたがやろうとしていることを行うためのより良い方法があるに違いない。JavaScriptを使用して、マウスがクリック/ホバーなどしたピクセルを取得し、その特定のポイントに絶対divを追加して、話している「フィルター」を作成できます。さらに、隣り合う2つのピクセルにタグが付けられた場合、新しいdivを作成するのではなく、以前のdivを拡張するだけで、パフォーマンスが大幅に向上します。
imgつまり、タグ付きの画像を読み込んでから、JavaScriptを使用して目的の処理を実行することを検討してください。