IE 11、10 和 9 中的图像缩放非常糟糕答案

【问题标题】：Image scaling in IE 11, 10, and 9 is terribleIE 11、10 和 9 中的图像缩放非常糟糕
【发布时间】：2014-04-12 17:13:19
【问题描述】：

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

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

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

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

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

这是生成的图像之一的直接链接：http://i.imgur.com/T9wgHSo.png。向我展示如何在 IE 9、10 和 11 的页面中以更小（例如 0.25 倍）的尺寸使这个看起来不错。

【问题讨论】：

您使用什么机制进行扩展？如果你在 IE 中完全绘制它会发生什么？您是否尝试过全比例绘制并设置画布缩放因子？
你是用它的数据URL作为<img>标签的来源来展示它，然后用CSS限制图像的大小吗？（要求澄清。）首先它是如何到达<canvas> 的？ edit 哦等等，别管最后一部分了。
关于ng-src 属性：您使用的是angular.js 吗？根据this thread，Angular 对 MSIE 浏览器有特殊处理。也许这就是您所看到的行为的根源。
原因如下：stackoverflow.com/questions/17861447/…
我已经成功地让你的可怕显示跨浏览器：尝试#img { -webkit-transform: scale(0.21) translateZ(1px); -webkit-transform-origin：左上角；变换：缩放（0.21）translateZ（1px）；变换原点：左上角；（并删除 img 本身的维度）。它会在 IE、FF 和 Chrome 中失败。可能会给某人一个线索...

标签： javascript css image internet-explorer canvas

【解决方案1】：

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

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

您唯一的选择是转向替代方案（在服务器上缩小规模或服从 Microsoft 并使用 Silverlight...;-)）。

不想这么说，但唯一真正的解决方案就是忍受它。

【讨论】：

没有没有服务器。整个页面是 JavaScript 运行客户端并通过 HTML 画布生成图像。
服务器端缩放可以最大程度地减少丑陋，但无助于响应式调整大小或客户端动画... MS 应该避免制作浏览器，因为它通过消耗 Web 开发人员的时间来破坏地球世界各地多年，这只是一个巨大的成本
这是另一个客户端替代方案：stackoverflow.com/questions/2303690/…

【解决方案2】：

似乎有两个问题。第一个是关于缩小<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 */ }

【讨论】：

【解决方案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">

【讨论】：