IE10中的图像插值

Question

这是我的使用情况：

我有一个响应式设计的网页。页面垂直分为两半，右侧我想展示一张图片（PDF页面呈现为PNG或JPG）。图像的大小应该随着窗口大小的改变而改变。

我认为我已经解决了这个问题。我在服务器上呈现图像，使其足够大以适应最大可能的窗口大小（根据我们公司的设置）。Chrome和Firefox可以很好地缩小（和插值）图像。

但是，接下来是Internet Explorer 10：如果将图像大小缩小到100％以下，它看起来像是数百万只苍蝇随机覆盖图像……我似乎找不到解决方案。

我了解到，在旧时代（IE7）中，曾经有一个名为“-ms-interpolation-mode”的CSS规则，可以将其设置为“bicubic”。但是，这已被宣布过时，并且在IE9+中不可用。

我必须接受它吗？如果IE9+中没有缩放图像的插值，那么如何称此设置为过时？是否有任何解决方案？

我知道：通常情况下，您不会让浏览器缩放您的图像。但是，您对此使用情况有更好的解决方案吗？

编辑：我应该提到，所涉及的图像是白底黑字。当使用细线字体时，效果更加明显。

编辑2：在关闭此线程之前，请重新检查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%;
}

- devnull69

---

我已经使用以下fiddle测试了这个问题，但无法重现。在IE9-11上一切看起来都非常完美。除非添加详细信息，例如屏幕截图和/或代码和图像样本，否则投票关闭。 - Bram Vanroy

请查看我的最新编辑。我编辑了你的fiddle，包含一个非常接近我的用例的png文件。您将能够在IE中看到效果。 - devnull69

我已经查看了相关信息，似乎我们没有什么好办法。普遍的共识是，在IE9+上调整大小后的图像会显得很糟糕，因此您应该在服务器端执行调整大小操作。无论如何，我投票支持重新打开问题 -- 也许有人对这个问题有其他解决方案。 - Frédéric Hamidi

Answer 1

好的，我找到了一个相当不太干净但适用的解决方法。

https://gist.github.com/fisch0920/37bac5e741eaec60e983中的Angular服务使用画布元素实时插值图像。它在IE10中对我有效（我不确定IE9是否有效）。

它的方法imageService.resizeStep在IE中非常快... 它呈现的速度比本机Firefox图像插值呈现还要快。

我不是很喜欢它，但它有效，并且甚至不会减慢用户的工作流程。

- devnull69