web-dev-qa-db-ja.com

IE 11、10、および9はひどいです

これが既存の質問であると言う前に、または使用する必要があるのはms-interpolation-modeだけであるか、またはサーバー上に事前にスケーリングされたバージョンのイメージを用意し、それを提供するだけでよい、という質問を読んでください。お願いします。それらのどれも適切ではありません。

最新のすべてのブラウザーのブラウザーでHTML5キャンバスを使用して非常に大きな画像を描画するアプリがあります。そのキャンバスから画像を引き出して表示します（画面上でかなり縮小されます）。縮小された画像は、Chrome、Firefox、Safari、またはWindowsでもMacでもOperaできれいに見えます。ただし、IEの古いバージョン（ms-interpolation-modeが機能するIE 7など）でこれをテストしていない場合でも、IEは非常にひどく見えます。 、ただしIE 9、10、および11のみ。

なぜ画像がスムーズに縮小されないのですか？ IEの後のバージョンでこれができると思いましたか？

これは、PNGファイルとして保存され、IE 11にロードされた画像のスクリーンショットです。PNGを見ているだけでも壊れていることに注意してください。私のソフトウェアとWebページは、ここでは完全に見えません。これは、PNGファイルを示すIE 11です。

WTF Microsoft?

IEの縮小サイズバージョンを作成するために、キャンバスで何らかのサイズ変更を行う必要がありますか？市場にある他のすべてのブラウザーが簡単に処理できる画像スケーリングを処理できないためです。これを改善するためにCSSで有効にできるものはありませんか？

生成された画像の1つへの直接リンクを次に示します。 http://i.imgur.com/T9wgHSo.png 。 IE 9、10、および11のページで大幅に小さいサイズ（たとえば0.25x）でこれをきれいに表示する方法を教えてください。

javascriptcssimageinternet-explorercanvas
38
John Munsch

2つの質問があるようです。 1つ目は、ダウンスケール<img>と2番目は、キャンバスの画像を縮小することです。前者は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 */ }
5
Sheepy

なぜ画像がスムーズに縮小されないのですか？これは、Internet Explorerがスムーズな補間をサポートしなくなったためです。実際、ms-interpolation-modeを使用することにより、以前のバージョンのInternet Explorer（バージョン7）でサポートされていました。

IEの新しいバージョンはこれをサポートしていません。これは非常にイライラするIE問題であり、CSSでは解決できません。

あなたが持っている唯一のオプションは、代替案に転換することです（サーバー上でそれをダウンスケールするか、Microsoftに従ってSilverlightを使用してください; ;-)）。

それを言うのは嫌いですが、唯一の真の解決策はそれと一緒に暮らすことです。

5
Ron Deijkers

自分で同じ問題に遭遇した後、私はこれを見つけました Crossbrowser-Bicubic-Image-Interpolation script。 IE11のWin7仮想マシンでテストし、動作します。

.Zipをダウンロードしたら、demo.htmlファイルを開いて、スクリプトの適用方法を確認できます。そのHTMLファイルの26行目に、クラス「first」の画像のみを対象とするjQueryコードがあります。

$('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">
0
Mentalist