像素化跨瀏覽器圖像縮放

我想用scale = 2.0縮放圖像。我想這樣做沒有任何平滑，所以所需的效果是將原始圖像的每個像素變成2x2像素的相同顏色。像素化跨瀏覽器圖像縮放

我不知道是否可以在Javascript/CSS中以跨瀏覽器（> = IE7）的方式執行此操作，而不使用<canvas />標記。

2011-09-15 julkiewicz

對不起，我不相信你想要的效果可能是沒有畫布的跨瀏覽器。

在Canvas中的Firefox中，您可以執行ctx.mozImageSmoothingEnabled = false;，但這與您將要獲得的距離相近。

image-rendering: -moz-crisp-edges;可能會幫助你在Firefox的CSS縮放，和-ms-interpolation-mode *可能會幫助你在IE中，但我懷疑你會得到一個解決方案，在所有瀏覽器看起來相同。

*我認爲這已被棄用/廢棄。

2011-09-15 17:51:14

這很不幸，如果沒有其他的東西出現，我會接受你的答案並尋找其他地方的解決方法。我想我也讀過'moz-crisp-edges'只適用於最新版本的Firefox，儘管我並不是100％確定。 – julkiewicz

我知道閃存是一種垂死的技術，但是如果你想檢查一下，這是一些非常出色的圖像操作代碼。這對標準的基於Web的圖像處理來說似乎有點複雜，儘管Sounds就像一個邪惡的想法！

2011-09-15 17:50:11 Simon

那麼我的整個web應用程序都是用html + js編寫的，所以這不是一個選項。我同意閃光燈快要死了。 – julkiewicz

嘿，給我看一個用JavaScript編寫的視頻編輯器...... – FlavorScape

渲染方法的任何細節例如抗鋸齒/平滑不在CSS 2.1範圍內。所以對於CSS 2.1，答案是「否」。 JS中的圖像對象也沒有縮放功能。所以'不'再次。

2011-09-15 17:55:29

回答