web-dev-qa-db-ja.com

Microsoft Edge画像スケーリング

MS Edgeのバイキュービックで画像スケールを作成するにはどうすればよいですか？動作を変更する可能性のあるCSSまたは類似のものはありますか？.

このページを参照してください： http://duttongarage.com/Race-Workshop~317

右側にはテクスチャ背景の2つの画像があり、奇妙なアーティファクトがはっきりと見えます

Chrome v Edge Moire pattern

左側がChrome、右側がMS Edge。ご覧のように、サイズ変更はバイキュービックではなく、最近隣または線形であるため、奇妙なモアレ効果があります。

より一般的な別の例： Edge v Crhome Pixelation

Microsoft Edge on Top、Chrome on the Bottom。ピクセレーションに注目してください。これは、過去10年間のブラウザに期待したようなものです。

cssmicrosoft-edge
23
Chris Seufert

答えの愚かさで申し訳ありませんが、ご覧のように、Edgeは画像レンダリングオプションをサポートしていません。そのため、jQueryを使用して画像のサイズを変更してみてください。

たとえば、次のソリューションを使用できます この答え ：画像の下に<canvas id="canvas"></canvas>を作成すると、次のようになります

スクリーンショット

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

img = new Image();
img.onload = function () {

    canvas.height = canvas.width * (img.height / img.width);


    /// step 1
    var oc = document.createElement('canvas'),
        octx = oc.getContext('2d');

    oc.width = img.width * 0.5;
    oc.height = img.height * 0.5;
    octx.drawImage(img, 0, 0, oc.width, oc.height);

    /// step 2
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);
}
img.src = "http://duttongarage.com/img/2167/824";

数学で簡単にoc.widthを調整できます。たとえば、

oc.width = $(".me-wrap-image").width();
oc.height = $(".me-wrap-image").height();

構造を調整して、

| .me-wrap-image
| .some-class-to-get-width-and-height
-> img

img.srcの場合、使用できます

$("div.some-class-to-get img").each(function(){
    img.src = $(this).attr('src');
});

しかし、それを適切に機能させる方法はわかりません。あなたがそれを修正してほしい:)

2
x0 z1

廃止

これは古いソリューションであり、MS Edgeの最新バージョンでは機能しません。

===========

この小さなcss Tweakで修正された問題：

img {
    -ms-interpolation-mode: bicubic;
}
1
xb1itz