展開圖像沒有平滑

是否有可能放大一個img元素，以便它仍然看起來像素化？正如您在本示例（http://jsfiddle.net/4qgSc/）中看到的，我測試過的所有瀏覽器都使用了一些「平滑」效果。重新繪製它在畫布中不是一個可能的解決方案，因爲我想動畫放大。展開圖像沒有平滑

編輯：現在使用一類具有以下屬性：

image-rendering: optimizeSpeed; 
image-rendering: -moz-crisp-edges; 
image-rendering: -webkit-optimize-contrast; 
-ms-interpolation-mode: nearest-neighbor;

achvies的關閉引起。它適用於除Chrome之外的所有瀏覽器（16.0.912.75米）。

來源

2012-01-15 user1039407

我想你要找的是什麼CSS image rendering property.

http://jsfiddle.net/alpacalips/4qgSc/5/

來源

2012-01-15 19:37:16 shaunsantacruz

完美！正是我在找什麼！除此之外，它似乎不適用於Opera，Safari和Chrome？ ...這些瀏覽器之一的任何CSS等價物？ – user1039407 2012-01-15 19:50:00

「圖像渲染：optimizeSpeed;」爲Opera做的工作 - 即使他們說「目前optimizeSpeed和-moz-crisp-edges是相等的，都會導致最近鄰居重新採樣」......實際上是錯誤的。但Chrome和Safari仍然沒有成功。 – user1039407 2012-01-15 20:06:51

在這個時候我覺得你運氣不好。對於Chrome，我發現這個：http://phrogz.net/tmp/canvas_image_zoom.html – shaunsantacruz 2012-01-15 20:10:26

-2

一種可能的解決方案是展開所有圖像（http://jsfiddle.net/4qgSc/1/）。您的圖像可以使用使用「近鄰」模式在Photoshop或其他圖像編輯軟件操作（宏）BES容易轉變：

enter image description here

來源

2012-01-15 19:11:08

我想保持無級放大圖像的可能性，所以會有幾乎無限的可能性，客戶端需要下載所有的縮放步驟。 – user1039407 2012-01-15 19:33:24

是什麼？不，你只需要一個大的就足夠了。 – 2012-01-15 19:47:45

好的...當然，你是對的。但由於我的圖片已經有4000多個尺寸，擴大它們25.000％對於交通來說不會太好。 – user1039407 2012-01-15 19:59:05

展開圖像沒有平滑

回答

相關問題