web-dev-qa-db-fra.com

La mise à l'échelle de l'image en IE 11, 10 et 9 est terrible

Avant de dire que c'est une question existante, ou que tout ce que je dois utiliser est le mode d'interpolation ms, ou que je dois juste avoir une version pré-mise à l'échelle de l'image sur le serveur et la servir, lisez la question. S'il vous plaît. Rien de tout cela n'est approprié.

J'ai une application qui dessine une très grande image en utilisant le canevas HTML5 dans le navigateur sur tous les navigateurs modernes. Je retire une image de ce canevas et je l'affiche (taille considérablement réduite à l'écran). L'image réduite semble bien sur Chrome, Firefox, Safari ou Opera que ce soit Windows ou Mac. IE semble cependant très terrible, même si je ne teste pas cela sur les anciennes versions de IE (comme IE 7 où le mode ms-interpolation fonctionne) , mais uniquement sur IE 9, 10 et 11.

Pourquoi ne réduisent-ils pas progressivement l'image? Je pensais que les versions ultérieures de IE pourraient le faire?

Voici une capture d'écran de mon image enregistrée en tant que fichier PNG et chargée dans IE 11. Notez qu'elle est cassée même si je ne fais que regarder le PNG. Mon logiciel et ma page Web sont complètement hors de vue ici. C'est juste IE 11 montrant un fichier PNG.

WTF Microsoft?

Vais-je devoir faire une sorte de redimensionnement dans le canevas juste pour créer une version de taille réduite pour IE parce qu'ils ne peuvent pas gérer la mise à l'échelle d'image que tous les autres navigateurs du marché gèrent facilement? N'y a-t-il rien que je puisse activer via CSS pour améliorer la présentation?

Voici un lien direct vers l'une des images générées: http://i.imgur.com/T9wgHSo.png . Montrez-moi comment rendre cela beau dans une taille beaucoup plus petite (par exemple 0,25x) dans une page pour IE 9, 10 et 11.

javascriptcssimageinternet-explorercanvas
38
John Munsch

Il semble y avoir deux questions. Le premier concerne la réduction d'échelle <img> et la seconde concerne la réduction de l'image dans le canevas. Le premier ne se produit que sur IE mais le dernier arrive aussi aux autres navigateurs.

Vous vous débrouillez bien, mais vous pourrez clarifier davantage votre question la prochaine fois; les deux ont été répondues le SO et chacune a des solutions différentes.

Pour <img>, comme indiqué dans d'autres réponses, vous ne pouvez rien faire, sauf pour fournir une image correctement réduite.

Pour le canevas, la question se résume à une qualité de réduction d'échelle avec drawImage, et a déjà reçu une réponse: HTML5 Canvas Resize (Downscale) Image High Quality?

Voici un exemple, en utilisant l'algorithme dans cette réponse, qui produit une image bien mise à l'échelle sur 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 */ }
5
Sheepy

Pourquoi ne réduisent-ils pas progressivement l'image? Eh bien, car Internet Explorer ne prend tout simplement plus en charge une forme d'interpolation fluide. Il était en effet pris en charge dans les versions antérieures d'Internet Explorer (version 7) en utilisant le mode d'interpolation ms.

Les versions plus récentes de IE ne le prennent pas en charge. C'est un problème IE IE $ très frustrant et ne peut pas être résolu par CSS.

Les seules options que vous avez sont de vous détourner vers des alternatives (réduisez-les sur le serveur ou obéissez à Microsoft et utilisez Silverlight ... ;-)).

Je déteste le dire, mais la seule vraie solution est de vivre avec.

5
Ron Deijkers

Après avoir rencontré le même problème moi-même, j'ai trouvé ce script Crossbrowser-Bicubic-Image-Interpolation . Je l'ai testé sur ma machine virtuelle Win7 dans IE11 et cela fonctionne.

Après avoir téléchargé le .Zip, vous pouvez ouvrir le fichier demo.html pour voir comment appliquer le script. Notez à la ligne 26 de ce fichier HTML, il y a du code jQuery qui cible uniquement les images avec la classe "first":

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

Mais vous pouvez supprimer ".first" pour qu'il cible toutes les images:

$('img').bicubicImgInterpolation({

C'est tout ce dont vous avez besoin. jquery.js, bicubicInterpolation.js, et le <script> qui appelle la fonction.

Ces éléments dans le <head> tag est probablement une bonne idée d'inclure aussi:

<!-- 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">
0
Mentalist