IE10中的圖像插值

Question

這是我的用例：

我有一個響應式設計的網頁。 頁面垂直分成兩半，在右側我想顯示一個圖像（一個PDF頁面呈現為PNG或JPG）。 調整窗口大小后，圖像的大小應該會更改。

我以為我已經解決了這個問題。 我將服務器上的圖像渲染到足夠大的窗口大小（根據我們公司的設置）。 Chrome和Firefox縮小（並插入）圖像就好了。

但是有一個Internet Explorer 10：如果圖像大小縮小到100％以下的任何值，它看起來像一百萬只蒼蠅隨機覆蓋圖像...我似乎無法找到解決方案。

我了解到，在ol'（IE7）中，曾經有一個CSS規則用於這種稱為-ms-interpolation-mode ，可以設置為bicubic 。 但是這已被宣布為過時的，並且在IE9 +中不可用

我必須這樣接受嗎？ 如果在IE9 +中沒有縮放圖像的插值，那么如何將此設置稱為過時？ 這有什么解決方案嗎？

我知道：通常你不會讓你的瀏覽器擴展你的圖像。 但是你有更好的解決方案嗎？

編輯：我應該提到有問題的圖像是白色背景上的黑色文本。 在圖像中使用細線字體時，效果更明顯。

編輯2：請在關閉此主題之前重新檢查小提琴（ http://jsfiddle.net/7grxut1t/16/ ）。 如果您在Chrome和IE中調整到非常小的尺寸，您將看到差異！

我的代碼的相關部分

<div>
   <img src="http://websocket.bplaced.net/test.png"/>
</div>

CSS：

div {
   position: relative;
   width: 50%;
   height: 100%;
}

img {
   width: 100%;
}

Answer 1

好的，我發現了一個相當骯臟但適用的解決方法

來自https://gist.github.com/fisch0920/37bac5e741eaec60e983的角度服務使用canvas元素即時插入圖像。 它在IE10中適用於我（雖然我不確定IE9）。

它的方法imageService.resizeStep在IE中速度驚人...它比原生的Firefox圖像插值渲染明顯更快。

我真的不喜歡它，但它有效，它甚至不會減慢用戶的工作流程。