Microsoft Edge图像缩放 [英] Microsoft Edge Image Scaling

问题描述

如何使用bicubic为MS Edge制作图像缩放？有一些CSS或类似的可以改变行为。

查看此页面：

左侧的Chrome，右侧的MS Edge。

另一个比较典型的例子是：

Microsoft Edge on Top，Chrome在底部。注意像素化，它像我从过去十年来的浏览器所期望的那样。

解决方案

对于愚蠢的答案，如我所见，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。例如，您可以使用

  oc.width = $（me-wrap-image）。 
 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）每个（function（）{
 img.src = $（this）.attr '）; 
}）; 
  

但我不确定，如何使它正常工作。
希望你修复它：）

How do i make an image scale with bicubic for MS Edge? Is there some CSS or similar that can change the behavour.

See this page: http://duttongarage.com/Race-Workshop~317

On the right there are two images that have textured background, you can see the weird artifacts quite clearly

Chrome on the Left, MS Edge on the Right. As you can see there is some weird moire effect from the resize being nearest neighbor or linear, not bicubic.

Another example that is more typical:

Microsoft Edge on Top, Chrome on the Bottom. Notice the pixelation, its like what i would expect from browsers from the last decade.

解决方案

Sorry for stupidness of answer, but, as I can see, Edge doesn't support any image-rendering options, so, please, try to use jQuery to resize picture.

For example, you can use solution from this answer: just create <canvas id="canvas"></canvas> under your image and see:

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

You can easily adjust oc.width with math. For example, you can use

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

Better, if you adjust your structure by

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

for img.src you can use

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

But I'm not sure, how to make it work properly. Hope you fix it :)

这篇关于Microsoft Edge图像缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！