IE 11、10和9中的图像缩放效果很差

Question

IE 11、10和9中的图像缩放效果很差

javascriptcssimageinternet-explorercanvas

39

在你说这是已知问题、或是我只需要使用ms-interpolation-mode，或者我只需要在服务器上有预缩放版本并提供那个版本之前，请先看一下问题的描述。请注意，这些都不适用于我的问题。

我有一个应用程序，在所有现代浏览器中使用HTML5画布绘制非常大的图像。从画布中取出一张图像并显示它（在屏幕上缩小了很多）。Chrome、Firefox、Safari或Opera中缩小的图像看起来很好，无论是Windows还是Mac。但是IE却看起来非常糟糕，尽管我没有在旧版本的IE上测试（如IE 7，其中ms-interpolation-mode有效），但只在IE 9、10和11上测试。

为什么它们不能平滑地缩小图像呢？我以为IE的后续版本可以做到这一点？

这里有一张截图，是我保存为PNG文件并在IE 11中加载的图片。请注意，即使我只是查看PNG文件，它也是损坏的。我的软件和网页完全与此无关。这只是IE 11显示PNG文件的情况。

WTF Microsoft?

我是否需要在画布中进行某种调整，以便为IE制作一个缩小的版本，因为IE无法处理其他所有市场上都轻松处理的图像缩放？是否有CSS可以打开，以使其看起来更好？

这是一个生成图像的直接链接：http://i.imgur.com/T9wgHSo.png。请告诉我如何在IE 9、10和11的页面上将其显著地缩小（例如0.25x），使其看起来不错。

- John Munsch

2

你使用的是什么机制进行缩放？如果在IE中以全尺寸绘制会发生什么？你尝试过以全尺寸绘制并设置画布缩放因子吗？ - Ted Hopp

1

你是通过使用数据URL作为<img>标签的源来展示它，然后用CSS限制图像的大小吗？（询问澄清。）那么它首先是如何到达<canvas>的呢？编辑哦，等等，最后一部分不用管。 - Pointy

2

关于 ng-src 属性：你是否在使用 angular.js？根据这个帖子，Angular 对 MSIE 浏览器有特殊处理。也许这就是你看到的行为的源头。 - Ted Hopp

2

这是由于这个原因引起的：https://dev59.com/EGMm5IYBdhLWcg3wHMJ0 - user1693593

2

我已经成功地让你可怕的显示在跨浏览器上运行：尝试使用以下代码 #img { -webkit-transform: scale(0.21) translateZ(1px); -webkit-transform-origin: top left; transform: scale(0.21) translateZ(1px); transform-origin: top left; } （并删除图像本身的尺寸）。它将在IE，FF和Chrome中失败。也许这会给某人一些线索... - vals

显示剩余12条评论

3个回答

5

他们为什么不能平滑地缩小图像？这是因为Internet Explorer不再支持平滑插值。早期版本的Internet Explorer（版本7）确实支持它，使用ms-interpolation-mode即可。但新版IE不支持此功能。这是一个非常令人沮丧的IE问题，无法通过CSS解决。你唯一的选择是转向替代方案（在服务器上缩小它或遵从微软并使用Silverlight…;-)）。很抱歉要说，但唯一真正的解决方法就是忍受它。

- Ron Deijkers

2

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - John Munsch

5

服务器端扩展可以减少丑陋的情况，但无法帮助响应式重新调整大小或客户端动画...微软应该避免制作浏览器，因为多年来它烧掉了全球网络开发人员的时间，这只是一笔巨大的成本。 - neu-rah

这里还有另一种客户端的替代方案：https://dev59.com/9HE95IYBdhLWcg3wdtmj - Ron Deijkers

1

在我自己遇到同样的问题后，我找到了这个跨浏览器双三次插值图像脚本。我在IE11中的Win7虚拟机上测试过它并且它可以工作。

下载.zip文件后，您可以打开demo.html文件查看如何应用该脚本。请注意，在该HTML文件的第26行有一个jQuery代码，仅针对类名为“first”的图片：

$('img.first').bicubicImgInterpolation({

但是你可以删除".first"，使其针对所有图片：

$('img').bicubicImgInterpolation({

所以这就是你所需要的全部内容：jquery.js，bicubicInterpolation.js，以及调用函数的<script>标签。

这些位于<head>标签中的项目也应该包括：

<!-- enable canvas for old versions of IE -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="edit-Type" edit="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

- Mentalist

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sheepy · Accepted Answer

有两个问题需要解决。第一个问题是关于缩小的 <img>，而第二个问题则是关于在画布中缩小图像。第一个问题只在IE浏览器上出现，而后一个问题则适用于其他浏览器。

您做得很好，但下次可以更明确您的问题；这两个问题在SO上已经有了答案，并且每个问题都有不同的解决方案。

对于 <img>，正如其他答案中所讨论的那样，除了提供正确缩小的图像外，您无法做任何事情。

对于画布，问题归结为使用drawImage进行缩小的质量问题，并且已经有了答案：HTML5 Canvas Resize (Downscale) Image High Quality?

这里是一个示例，使用该答案中的算法，在IE 11上生成了一个漂亮的缩放图像：

<!DOCTYPE html><meta charset="utf-8"/>
<img width='2550' height='3300' src='T9wgHSo.png' />
<script> 'use strict';
var img = document.getElementsByTagName('img')[0];
document.body.appendChild( downScaleImage( img, 0.1 ) );
img.parentNode.removeChild( img );

function downScaleImage(img, scale) { /* Please copy code from the other answer */ }
function downScaleCanvas(cv, scale) { /* Please copy code from the other answer */ }