Webページで画像を取得し、JavaScript（または最適なもの）を使用して動的に「ピクセル化」します（たとえば、20ピクセルの正方形に）。次に、ユーザーがページを下にスクロールすると、画像がピクセル化されなくなるまで、画像の解像度を徐々に上げる必要があります。
これを行うにはどうすればよいですか？PHPを使用して画像のサイズを数回変更し、画像を切り替えるだけでよいことに気付きましたが、それにはいくつかの追加の画像を読み込む必要があります。また、フラッシュとピクセルベンダーで効果を発揮できることはわかっていますが、可能であればHTML5、CSS、Javascriptの制限内で実現したいと考えています。
どんな考えにも感謝します！
更新：このようなものですが、Flashの代わりにJavascriptを使用していますか？http://www.reflektions.com/miniml/template_permalink.asp?id=390
隠し<canvas>要素で画像をレンダリングできます。次に、ここhttp://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulationで説明されている手法の派生を使用します。<canvas>減少し続ける を使用して、2 番目の要素で画像のピクセル化されたバージョンを作成しfillRect'sます。このようにして、元の画像データをバッファリングすることさえできます。
編集:元の画像を一度だけ取得して描画する必要があるように、 2つ<canvas>の要素を使用します。おそらく、この画像を同じ<canvas>要素にバッファリング/キャッシュすることはできますが、ビューポートの外に描画することで、これが可能かどうかはわかりません.
ピクセル単位の幅を正方形の幅で割った後、高さを正方形の高さで割った計算を使用します。これにより、探している解像度が低くなります。
次に、解像度を結果に変更する方法、または探している正方形の位置（高さと幅）/2にあるすべてのピクセルの色を取得する方法を見つけることができます。次に、それらを適切な色とサイズのdivタグまたはテーブルに生成し、最終的に画像自体を作成します。
画像の複数のバージョンを作成し、スクロールしながらそれらのz-indexまたは可視性を変更できるというより速いアイデアがあります。基本的に、各画像の解像度は異なります。多くの画像に対してそれを行う必要がある場合、このソリューションは多くの画像編集があるほど効率的ではありませんが、いつでもバッチ編集を行うことができます。
もっとアイデアが思い浮かんだら編集します。
ポータブルな方法ではありません。
それはフラッシュで実行できるかもしれません。Firefox JS 拡張機能により、画像を JS 配列、Base64 文字列などとして読み取ることができます。「1 DIV=1 ピクセル」ハックを試すこともできますが、適切な速度で適切なサイズの画像を取得することは困難です。あなたが本当に興奮しているなら、data: URI を使ってその場で base64 でエンコードされた画像を作成してみてください...多くの方法がありますが、良い方法はありません...