css - query - Escala de imagen de Microsoft Edge

hack css edge

Question

¿Cómo hago una escala de imagen con bicubic para MS Edge? ¿Hay algún CSS o similar que pueda cambiar el comportamiento?

Vea esta página: http://duttongarage.com/Race-Workshop~317

A la derecha hay dos imágenes que tienen un fondo texturizado, puedes ver los artefactos extraños con bastante claridad

Chrome a la izquierda, MS Edge a la derecha. Como puede ver, hay un efecto muaré extraño porque el tamaño es el vecino más cercano o lineal, no bicúbico.

Otro ejemplo que es más típico:

Microsoft Edge en la parte superior, Chrome en la parte inferior. Observe la pixelación, es como lo que esperaría de los navegadores de la última década.

Answer 1

Lo siento por la estupidez de la respuesta, pero, como puedo ver, Edge no admite ninguna opción de reproducción de imágenes, así que, por favor, trate de usar jQuery para cambiar el tamaño de la imagen.

Por ejemplo, puede usar la solución de esta respuesta : simplemente cree <canvas id="canvas"></canvas> debajo de su imagen y vea:

screenshot

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";

Puedes ajustar fácilmente el ancho de las matemáticas con matemáticas. Por ejemplo, puedes usar

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

Mejor, si ajustas tu estructura por

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

para img.src puedes usar

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

Pero no estoy seguro, cómo hacer que funcione correctamente. Espero que lo arregles :)

Answer 2

Obsoleto

Esta es una solución obsoleta y no funciona en versiones recientes de MS Edge.

===========

Este pequeño problema css tweak solucionado para mí:

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