IE10中的图像插值
Image interpolation in IE10
这是我的用例:
我有一个采用响应式设计的网页。该页面垂直分为两半,在右侧我想显示图像(呈现为 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%;
}
好的,我找到了一个很脏但适用的解决方法
来自 https://gist.github.com/fisch0920/37bac5e741eaec60e983 的 angular 服务使用 canvas 元素即时插入图像。它适用于我的 IE10(我不确定 IE9- 虽然)。
它的方法 imageService.resizeStep
在 IE 中速度惊人...它的渲染速度明显快于本机 Firefox 图像插值渲染。
我不太喜欢它,但它确实有效,甚至不会减慢用户的工作流程。
这是我的用例:
我有一个采用响应式设计的网页。该页面垂直分为两半,在右侧我想显示图像(呈现为 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%;
}
好的,我找到了一个很脏但适用的解决方法
来自 https://gist.github.com/fisch0920/37bac5e741eaec60e983 的 angular 服务使用 canvas 元素即时插入图像。它适用于我的 IE10(我不确定 IE9- 虽然)。
它的方法 imageService.resizeStep
在 IE 中速度惊人...它的渲染速度明显快于本机 Firefox 图像插值渲染。
我不太喜欢它,但它确实有效,甚至不会减慢用户的工作流程。