我要在網頁上拍攝圖像，然後使用JavaScript（或任何最適合的）來動態「像素化」它（例如，變成20像素的正方形）。然後，當用戶向下滾動頁面時，我需要圖像逐漸增加分辨率，直到它不再像素化。動態像素化HTML圖像元素
任何想法，我怎麼能做到這一點？我意識到我可以使用PHP來調整圖像大小和多次，只是切換圖像，但這需要加載幾張額外的圖像。另外，我知道我可能會使用閃光燈效果，但我希望在HTML5，CSS & Javascript的限制範圍內實現它。
欣賞任何想法！
更新：像這樣的東西，但與JavaScript而不是Flash？ http://www.reflektions.com/miniml/template_permalink.asp?id=390
您可以將圖片渲染到隱藏的<canvas>元素中。然後使用這裏描述的技術的推導http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation。在第二個<canvas>元素中使用不斷減少的fillRect's創建圖像的像素化版本。這樣你甚至可以緩衝原始圖像數據。
編輯：我會使用2 <canvas>元素，以便您只需要獲取並繪製原始圖像一次。也許你可以在同一個<canvas>元素中緩存/緩存這個圖像，但是通過在視圖端口之外繪製它，我不確定這是否可能。
這聽起來很有希望。你能詳細說明爲什麼我需要使用兩個畫布元素嗎？ –
啊，這是有道理的......我認爲這可能是一條路。你知道有哪些教程可以幫助我完成這樣的事情嗎？我明白了基本原則，但從未嘗試過實施這樣的事情。 –
我認爲在第一頁顯示如何獲取和繪製圖像，然後在其上循環以獲取某個x，y的顏色信息，第二個繪製圖像應該讓您開始:)。我不是'
我會使用一個計算，你得到的寬度（以像素除以方形寬度，然後除以高度除以高度）。這會讓你找到更低的分辨率。
然後，您可以找到一種方法將分辨率更改爲結果，或者在要查找的平方的位置（高度和寬度）/ 2處獲取每個像素的顏色。然後使用適當的顏色和大小將它們生成爲div標籤或表格，最終導致圖像爲自身。
我有一個可能更快的想法，您可以有多個版本的圖像，並在滾動時更改其z-index或其可見性。基本上每個圖像將具有不同的分辨率。如果你必須這樣做，許多圖像然後這個解決方案不會像有很多的圖像編輯一樣高效，但你總是可以做一個批量編輯。
讓我看看如果我能想到更多的想法，那麼我會編輯。
是的，我曾考慮多個圖像，但我希望圖像是全屏，因此加載多個大的圖像將是一個帶寬生豬 –
不是以便攜的方式。
這可能在Flash中可行。 Firefox JS擴展允許它讀取圖像作爲JS陣列，Base64字符串等。您可能會嘗試使用「1 DIV = 1像素」破解，但很難以任何合理的速度獲得任何合理大小的圖像。如果你感覺真的超，你可以嘗試使用數據的實時創建base64編碼的圖像：URI ......很多方法，但沒有好...
html5還沒有出來 – knittl
它還沒有最終確定，但很多它可用於現代（而非IE）瀏覽器 –
嘿，你有沒有找到一個適當的方式做到這一點？我相信，到目前爲止，HTML 5已經足夠支持正確執行此操作。我正在做一些類似的視頻，但我不確定fillRects是最佳選擇。 – Simon