Масштабирование изображения в Microsoft Edge

Как создать масштаб изображения с бикубикой для MS Edge? Есть ли какой-то CSS или подобный, который может изменить поведение.

Смотрите эту страницу: http://duttongarage.com/Race-Workshop~317

Справа есть два изображения с текстурированным фоном, вы можете довольно ясно увидеть странные артефакты.

Chrome слева, MS Edge справа. Как вы можете видеть, есть какой-то странный муаровый эффект от изменения размера ближайшего соседа или линейного, а не бикубического.

Еще один пример, который более типичен:

Microsoft Edge сверху, Chrome внизу. Обратите внимание на пикселирование, как и ожидалось от браузеров за последнее десятилетие.

Ответ 1

Извините за тупость ответа, но, как я вижу, 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

Устаревшие

Это устаревшее решение и не работает в последних версиях MS Edge.

===========

Этот маленький css изменяет исправленную проблему для меня:

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