Microsoft Edge Image缩放

Question

如何使用MS Edge的双三次曲线进行图像缩放？有没有一些CSS或类似的东西可以改变行为。

查看此页面：http://duttongarage.com/Race-Workshop~317

在右边有两张带有纹理背景的图像，你可以很清楚地看到奇怪的伪像。

​

​

Chrome在左边，MS Edge在右边。正如你所看到的，调整大小是最近的邻居或线性的，而不是双三次的，有一些奇怪的云纹效果。

另一个更典型的例子是：

​

Microsoft Edge在顶部，Chrome在底部。注意像素化，它就像我在过去十年中对浏览器的期望。

Answer 1

很抱歉回答的愚蠢，但是，正如我所看到的，Edge不支持任何图像渲染选项，所以，请尝试使用jQuery来调整图片大小。

例如，您可以使用来自this answer的解决方案:只需在您的镜像下创建<canvas id="canvas"></canvas>，然后查看：

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

你可以很容易地用数学来调整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');
});

但我不确定如何让它正常工作。希望你能解决这个问题:)

Answer 2

过时的

这是过时的解决方案，不适用于最新版本的MS Edge。

===========

这个小小的css调整为我解决了问题：

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