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

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

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

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

Chrome v Edge Moire Pattern

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

Другой, более типичный пример:  Edge v Crhome Pixelation

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


person Chris Seufert    schedule 14.08.2015    source источник
comment
вы можете просто удалить наложение пиксельного рисунка 2x2 с ваших изображений :)   -  person Roko C. Buljan    schedule 14.08.2015
comment
Это был просто очевидный артефакт масштабирования, это происходит со всеми изображениями, насколько я могу судить. Я добавлю еще один пример изображения.   -  person Chris Seufert    schedule 14.08.2015
comment
Не удается найти действительные официальные документы. Может быть, он еще не приземлился в Edge? developer.mozilla.org/en/docs/Web/CSS/image- рендеринг   -  person Roko C. Buljan    schedule 14.08.2015
comment
Я тоже ничего не могу найти об этом, и, похоже, поиск в Google Edge не особенно полезен.   -  person Chris Seufert    schedule 14.08.2015
comment
Да, поскольку это совершенно новый браузер (браузер, наконец-то?) - нам все еще нужно выяснить, как возвращать релевантные поисковые запросы ... Время покажет :(   -  person Roko C. Buljan    schedule 14.08.2015
comment
Нестандартное свойство CSS для этого было удалено в Edge. Одна из причин этого (помимо нестандартности) заключается в том, что разработчики злоупотребляют этой функцией для нацеливания на IE. Когда ошибки, на которые они нацелены, исправляются в Edge, сайт ломается, поскольку мы все еще получаем взлом. В целом мы работаем над улучшением качества масштабирования изображений в Edge. А пока вы можете проголосовать за следующее, если хотите, чтобы свойство рендеринга изображений CSS в Edge wpdev.uservoice.com/forums/257854-microsoft-edge-developer/   -  person David Storey    schedule 14.08.2015
comment
Я просто хотел бы увидеть лучший метод масштабирования по умолчанию. Я надеялся найти временное решение.   -  person Chris Seufert    schedule 14.08.2015
comment
3 года спустя, и это не было исправлено ....   -  person devmiles.com    schedule 22.11.2018


Ответы (2)


Извините за глупость ответа, но, как я вижу, 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 = $(".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');
});

Но я не уверен, как заставить его работать нормально. Надеюсь, ты это исправишь :)

person x0 z1    schedule 10.06.2016
comment
Это интересное решение, я не уверен, насколько хорошо оно будет работать с плавным макетом при изменении размера окна браузера. - person Chris Seufert; 10.06.2016
comment
@ChrisSeufert, Спасибо. Ну да. Изображение изменится только при обновлении окна браузера. Попробуйте мои комментарии (oc.width = oc.width = $(".me-wrap-image").width();). Если вы не будете изменять размер окна браузера после загрузки страницы, все, я думаю, будет в порядке. - person x0 z1; 10.06.2016
comment
@ChrisSeufert, но, насколько я могу судить, даже крупные компании этого не делают. Например, модуль JivoSite. Он просто ОДИН РАЗ генерирует свою позицию, и все, он не изменит размер, если вы измените размер окна браузера. Но, OFC, вы можете использовать window.setInterval(function(){ // recall function }, 5000); Но на самом деле? :) - person x0 z1; 10.06.2016
comment
@ Станислав Таланов, правда ли, что Microsoft Edge не поддерживает параметры рендеринга изображений? Я увеличил значок с помощью css transform: scale(2) и -ms-interpolation-mode: nearest-neighbor и т. Д., И во всех браузерах значок выглядит красиво и с псевдонимом, однако в MS Edge его уродливое сглаживание. Любые предложения, как пикселизировать изображения с измененным размером в MS Edge? - person Sam; 30.06.2017

Устарело

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

===========

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

img {
    -ms-interpolation-mode: bicubic;
}
person xb1itz    schedule 10.09.2015
comment
Это ничего не делает в Edge build 12.10240 - person Chris Seufert; 11.09.2015
comment
Теперь он также ничего не делает в IE11 (по крайней мере, в Win10) - гении УДАЛИЛИ этот хак, БЕЗ исправления движка по умолчанию - в качестве демонстрации перейдите на microsoft.com на рабочем столе, уменьшите размер браузера -window и посмотрите, насколько сломаны оба браузера MS по сравнению с Chrome и Firefox - невероятно в нашу эпоху отзывчивости ... - person Rop; 18.11.2015
comment
@Rop: В идеале свойства с префиксом не должны никогда использоваться в продакшене. На самом деле, если кто-то пытается создать хороший адаптивный сайт, я бы подумал, что функция srcset будет гораздо лучшим вариантом, чтобы обеспечить более плавную загрузку на разных устройствах. - person Katana314; 20.11.2015