Microsoft Edge Görüntü Ölçekleme

Question

MS Edge için bicubic ile bir görüntü ölçeği nasıl yapılır? Davranışı değiştirebilecek bazı CSS veya benzerleri var mı? üzerine, sen Solda oldukça net

Chrome'u garip eserler görebilirsiniz, arka plan dokulu olan iki resim vardır MS Kenar http://duttongarage.com/Race-Workshop~317

Sağda:

bu sayfaya bakın doğru. Gördüğünüz gibi, yeniden boyutlandırmanın en yakın komşu veya lineer olduğu, bicubik olmayan bir tuhaf hareli etkisi vardır. daha tipik

Başka bir örnek: Üstte

Microsoft Kenar, Bottom Chrome. Pikselleştirmeye dikkat edin, son on yıldaki tarayıcılardan beklediğim gibi.

Answer 1

Eski

Bu eskimiş bir çözümdür ve MS Edge'in son sürümlerinde çalışmaz. Ben gördüğünüz gibi Kenar doesn, cevap stupidness için

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

Answer 2

Maalesef:

===========

Bu küçük css benim için sorun sabit tweak herhangi bir görüntü işleme seçeneğini desteklemez, bu nedenle lütfen resmini yeniden boyutlandırmak için jQuery'yi kullanmayı deneyin.

Örneğin, this answer den çözümü kullanabilirsiniz: sadece resmin altında <canvas id="canvas"></canvas> oluşturup bkz: Kolayca matematikle oc.width ayarlayabilirsiniz

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

. Örneğin, img.src için size

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

kullanabilirsiniz

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

ederek yapısını ayarlamak eğer,

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

iyi kullanabilir Ama emin değilim, nasıl düzgün çalışması için Umarım düzeltin :)