IE10中的图像插值

Question

这是我的用例：

我有一个采用响应式设计的网页。该页面垂直分为两半，在右侧我想显示图像（呈现为 PNG 或 JPG 的 PDF 页面）。一旦调整 window 的大小，图像的大小就会改变。

我以为我已经解决了这个问题。我将服务器上的图像渲染得足够大，以达到最大可能的 window 大小（根据我们公司的设置）。 Chrome 和 Firefox 可以很好地缩小（和插值）图像。

但是还有 Internet Explorer 10：如果图像大小被缩小到 100% 以下，它看起来就像一百万只苍蝇随机覆盖图像......我似乎无法找到解决方案。

我了解到在旧时代 (IE7) 曾经有一个 CSS 规则用于此称为 -ms-interpolation-mode 可以设置为 bicubic。但这已被宣布过时，在 IE9+

中不可用

我一定要这样接受吗？如果IE9+没有对缩放图像进行插值，这个设置怎么能叫过时呢？有解决办法吗？

我知道：通常您不会让浏览器缩放图像。但是对于这个用例，您有更好的解决方案吗？

编辑：我应该提到有问题的图像是白底黑字。在图像中使用细线字体时效果更明显。

EDIT2：请在关闭此线程之前重新检查 fiddle (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 的 angular 服务使用 canvas 元素即时插入图像。它适用于我的 IE10（我不确定 IE9- 虽然）。

它的方法 imageService.resizeStep 在 IE 中速度惊人...它的渲染速度明显快于本机 Firefox 图像插值渲染。

我不太喜欢它，但它确实有效，甚至不会减慢用户的工作流程。

Image interpolation in IE10