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

Question

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

Joh*_*sch 38 javascript css internet-explorer canvas image

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

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

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

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

WTF微软？

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

这是与生成的图像之一的直接链接:http://i.imgur.com/T9wgHSo.png.告诉我如何在IE 9,10和11的页面中以相当小的(例如0.25x)大小使其看起来很好.

Answer 1

She*_*epy 5

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Ron*_*ers 5

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

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

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

讨厌说,但唯一真正的解决方案就是忍受它.

服务器端缩放可以最大限度地减少丑陋,但无法帮助响应重新调整大小或客户端动画... MS应该避免制作浏览器,因为它已经摧毁了地球,通过燃烧网络开发人员在世界范围内的时间多年,它只是一个巨大的成本 (5认同)
没有服务器。整个页面都是JavaScript运行客户端，并通过HTML画布生成图像。 (2认同)

归档时间：	11 年，8 月前
查看次数：	29363 次
最近记录：	6 年，2 月前