IE10中的图像插值 [英] Image interpolation in IE10

问题描述

这是我的用例：

我有一个响应式设计的网页。页面垂直分割成两部分，在右侧我想显示一个图像（一个PDF页面呈现为PNG或JPG）。调整窗口大小后，图像的大小应该会改变。

我以为我已经解决了这个问题。我将服务器上的图像渲染到足够大的尺寸（根据我们公司的设置）。 Chrome和Firefox会缩小图像尺寸（并插入图像）。

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

我了解到，在过去的日子里（IE7）对于这个名为 -ms-interpolation-mode 的CSS规则可以设置为 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; 
宽度：50％; 
身高：100％; 
} 
 
 img {
 width：100％; 
} 
  

解决方案

脏，但适用的解决方法

来自 https ：//gist.github.com/fisch0920/37bac5e741eaec60e983 使用画布元素即时插补图像。它适用于我在IE10（我不确定IE9 - 但它）。

它的方法 imageService.resizeStep 在IE中速度惊人......它比本地Firefox图像插值渲染速度快得多。

我不太喜欢它，但它工作正常，甚至可以减缓用户的工作流程。

This is my use case:

I have a web page with a responsive design. The page is vertically split in two halves, on the right hand side I want to show an image (a PDF page rendered as PNG or JPG). The size of the image should change as soon as the window is resized.

I thought I already solved this. I render the image on the server to be big enough for the biggest possible window size (according to our company setup). Chrome and Firefox scale down (and interpolate) the image just fine.

But then there is Internet Explorer 10: If the image size is scaled down to anything beneath 100% it looks like a million flies randomly covering the image ... I cannot seem to find a solution for this.

I learned that in the ol' days (IE7) there used to be a CSS rule for this called -ms-interpolation-mode that could be set to bicubic. But this has been declared obsolete and is not available in IE9+

Do I have to accept it like that? How can this setting be called obsolete if there is no interpolation for scaled images in IE9+? Is there any solution for this?

I know: Usually you don't let your browser scale your images. But do you have a better solution for this use case?

EDIT: I should have mentioned that the images in question are black text on white background. The effect is better visible when using thin lined fonts in the image.

EDIT2: Please recheck the fiddle (http://jsfiddle.net/7grxut1t/16/) before you close this thread. If you resize to a very small size in Chrome and IE you will see the difference!

The relevant part of my code

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

CSS:

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

img {
   width: 100%;
}

解决方案

Ok, I found a quite dirty, yet applicable workaround

The angular service from https://gist.github.com/fisch0920/37bac5e741eaec60e983 uses the canvas element to interpolate the image on-the-fly. It works for me in IE10 (I am not sure about IE9- though).

Its method imageService.resizeStep is amazingly fast in IE ... it renders noticeably faster than the native Firefox image interpolation rendering.

I don't really like it, but it works and it doesn't even slow down the user's workflow.

这篇关于IE10中的图像插值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！