Scalabilità immagine Microsoft Edge

Question

Come si crea una scala dell'immagine con bicubica per MS Edge? C'è qualche CSS o simile che può cambiare il comportamento.

Vedere questa pagina: http://duttongarage.com/Race-Workshop~317

Sulla destra ci sono due immagini che sono con texture di sfondo, è possibile vedere i reperti strani chiaramente

Chrome sulla sinistra, MS Edge la destra. Come puoi vedere, c'è qualche strano effetto moiré dal ridimensionamento che è il vicino più prossimo o lineare, non bicubico.

Un altro esempio che è più tipico:

Microsoft Edge superiore, Chrome sul fondo. Si noti la pixelazione, è come quello che mi aspetterei dai browser dell'ultimo decennio.

Answer 1

obsoleto

Si tratta di una soluzione obsoleta e non funziona su versioni recenti di MS Edge.

===========

Questo piccolo CSS Tweak fisso problema per me:

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

Answer 2

Scusate stupidness di risposta, ma, come posso vedere, Riva doesn Supporta qualsiasi opzione di rendering delle immagini, quindi, per favore, prova a usare jQuery per ridimensionare l'immagine.

Ad esempio, è possibile utilizzare la soluzione da this answer: basta creare <canvas id="canvas"></canvas> sotto la vostra immagine e vedere:

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

È possibile regolare facilmente oc.width con la matematica. Ad esempio, è possibile utilizzare

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

Meglio, se si regola la vostra struttura per

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

per img.src è possibile utilizzare

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

Ma io non sono sicuro, come per farlo funzionare correttamente. Spero che tu lo aggiusti :)