Масштабирование изображения в IE 11, 10 и 9 ужасно

Прежде чем говорить, что это уже существующий вопрос, или что все, что мне нужно использовать, это ms-интерполяция-режим, или что мне просто нужно иметь предварительно масштабированную версию изображения на сервере и обслуживать ее, читать вопрос. Пожалуйста. Ни один из них не подходит.

У меня есть приложение, которое рисует очень большое изображение, используя холст HTML5 в браузере во всех современных браузерах. Я вытаскиваю изображение из этого холста и отображаю его (значительно уменьшаюсь по размеру на экране). Уменьшенное изображение отлично выглядит в Chrome, Firefox, Safari или Opera, будь то Windows или Mac. Однако IE выглядит очень ужасно, хотя я не тестирую это на старых версиях IE (например, IE 7, где работает режим интерполяции ms), но только на IE 9, 10 и 11.

Почему они не плавно уменьшают изображение? Я думал, что более поздние версии IE могут это сделать?

Здесь снимок экрана моего изображения, сохраненный как файл PNG и загруженный в IE 11. Обратите внимание, что он сломан, даже если все, что я делаю, это просмотр PNG. Мое программное обеспечение и моя веб-страница полностью не представлены здесь. Это только IE 11, показывающий PNG файл.

WTF Microsoft?

Я собираюсь сделать какое-то изменение размера в холсте, чтобы сделать версию уменьшенного размера для IE, потому что они не могут справиться с масштабированием изображения, которое каждый другой браузер на рынке справляется с легкостью? Не могу ли я включить CSS, чтобы сделать это лучше?

Здесь прямая ссылка на одно из сгенерированных изображений: http://i.imgur.com/T9wgHSo.png. Покажите мне, как сделать это хорошо в значительно меньшем размере (скажем, 0,25x) на странице для IE 9, 10 и 11.

Ответы

Ответ 1

Кажется, есть два вопроса. Первый - о масштабированном <img>, а второй - о масштабировании изображения в холсте. Первое происходит только в IE, но позже происходит и с другими браузерами.

У вас все хорошо, но вы можете уточнить свой вопрос в следующий раз; на оба ответа был дан ответ на SO, и у каждого есть разные решения.

Для <img>, как обсуждалось в других ответах, вы ничего не можете сделать, кроме как обеспечить правильно уменьшенное изображение.

Для холста вопрос сводится к уменьшенному качеству с помощью drawImage и уже был дан ответ: Высокое качество изображения в формате HTML5 Canvas (Downscale)

Вот пример, используя алгоритм в этом ответе, который создает хорошо масштабированное изображение в 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 */ }

Ответ 2

Почему они не плавно уменьшают изображение? Хорошо, потому что Internet Explorer просто больше не поддерживает гладкую форму интерполяции. Он действительно поддерживался в более ранних версиях Internet Explorer (версия 7) с использованием ms-интерполяционного режима.

Более новые версии IE не поддерживают это. Это очень неприятная проблема IE и не может быть решена с помощью CSS.

Единственными параметрами, которые у вас есть, является переадресация на альтернативы (масштабирование на сервере или подчинение Microsoft и использование Silverlight...;-)).

Ненавижу говорить об этом, но единственное истинное решение - просто жить с ним.

Ответ 3

После того, как я сам столкнулся с той же проблемой, я обнаружил этот скрипт Crossbrowser-Bicubic-Image-Interpolation. Я протестировал его на своей виртуальной машине Win7 в IE11, и он работает.

После загрузки .zip вы можете открыть файл demo.html, чтобы узнать, как применить скрипт. Обратите внимание, что в строке 26 этого HTML файла есть код 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">