Question

在您说这是一个现有问题之前，或者我需要使用的是ms-interpolation-mode，或者我只需要在服务器上预先设置图像版本并提供服务，请阅读这个问题。请。这些都不合适。

我有一个应用程序，可以在所有现代浏览器的浏览器中使用HTML5画布绘制一个非常大的图像。我从画布中取出一个图像并显示它（在屏幕上缩小了相当大的尺寸）。无论是Windows还是Mac，Chrome，Firefox，Safari或Opera上的缩小图像都可以正常显示。然而，IE看起来非常糟糕，即使我没有在旧版本的IE上测试它（比如IE-interpolation -mode-mode工作的IE 7），但仅限于IE 9,10和11。

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

这是我的图像的屏幕截图，保存为PNG文件并在IE 11中加载。请注意，即使我正在查看的是PNG，它也会被破坏。我的软件和我的网页完全不在这里。这只是IE 11显示的PNG文件。

WTF Microsoft?

我是否必须在画布上进行某种调整才能为IE制作缩小尺寸的版本，因为它们无法处理市场上其他浏览器轻松处理的图像缩放？我是否可以通过CSS打开它以使其看起来更好？

以下是其中一张生成图片的直接链接：http://i.imgur.com/T9wgHSo.png。告诉我如何在IE 9,10和11的页面中以小得多（例如0.25x）的尺寸使其看起来很好。

Answer 1

似乎有两个问题。第一个是关于缩小的<img>，第二个是关于在画布中缩小图像。第一种情况只发生在IE上，但后来发生在其他浏览器上。

你做得很好，但下次你可以更多地澄清你的问题;两者都得到了回答，每个都有不同的解决方案。

对于<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 */ }

Answer 2

为什么他们不能平滑缩小图像？好吧，因为Internet Explorer不再支持平滑的插值形式。通过使用ms-interpolation-mode，早期版本的Internet Explorer（版本7）确实支持它。

较新版本的IE不支持此功能。这是一个非常令人沮丧的IE问题，无法通过CSS解决。

你唯一的选择是转向替代品（在服务器上缩小它或服从微软并使用Silverlight ...... ;-)）。

讨厌说出来，但唯一真正的解决方案就是忍受它。

Answer 3

我自己遇到相同的问题后，发现了这个Crossbrowser-Bicubic-Image-Interpolation脚本。我在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">

IE 11,10和9中的图像缩放非常糟糕

3 个答案: