由于d3.js(类似于this),我已经创建了一个带有画布(仅图像)和一些svg-gridlines的简单图像查看器(具有网格和图像)。我使用d3.js中的缩放功能来缩放和平移图像/网格线。

我在画布上的图像应使用最近邻插值。我设置了许多样式元素来实现此目标。 Chrome和Firefox运行良好,但是我在Internet Explorer 9上遇到了问题(我需要支持ie9)。在IE9中,图像始终模糊。

Internet Explorer 9是否尊重画布的最近邻插值?

我的设置正确吗?

我在d3.js中的画布代码:

canvas
        .attr("width", dx)
        .attr("height", dy)
        .attr("style", "outline: thin solid black;")
        .style("width", width + "px")
        .style("height", height + "px")
        .style("transform", "translate(" + marginleft + "px,0)")
        .style("image-rendering","-moz-crisp-edges")
        .style("image-rendering","-o-crisp-edges")
        .style("image-rendering","-webkit-optimize-contrast")
        .style("image-rendering","optimize-contrast")
        .style("image-rendering","pixelated")
        .style("-ms-interpolation-mode","nearest-neighbor")
        .call(drawImage);


此d3.js代码应代表(大部分)此CSS

   img {
            image-rendering: optimizeSpeed;
            image-rendering: -moz-crisp-edges;          // Firefox
            image-rendering: -o-crisp-edges;            // Opera
            image-rendering: -webkit-optimize-contrast; // Chrome (and eventually Safari)
            image-rendering: pixelated;                 // Chrome
            image-rendering: optimize-contrast;         // CSS3 Proposed
            -ms-interpolation-mode: nearest-neighbor;   // IE8+
        }


这是我的绘画功能

function drawImage(canvas2: any) {
        var context = canvas.node().getContext("2d");
        var image = context.createImageData(dx, dy);

        for (var y = 0, p = -1; y < dy; ++y) {
            for (var x = 0; x < dx; ++x) {
                let pixval = heatmap[y][x];
                var c = d3.rgb(color(pixval));
                if(pixval <= min){
                    c = d3.rgb(255,255,255);
                }
                image.data[++p] = c.r;
                image.data[++p] = c.g;
                image.data[++p] = c.b;
                image.data[++p] = 255;
            }
        }

        context.mozImageSmoothingEnabled = false;
        context.ImageSmoothingEnabled = false; //context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;

        context.putImageData(image, 0, 0);
        imageObj.src = canvas.node().toDataURL();
    }

最佳答案

请参阅MDN's image-rendering page上有关兼容性的说明
 (强调我的)


  [1] Internet Explorer 7和8支持具有两个值(双三次和最近邻居)的非标准-ms-interpolation-mode属性:
  
  仅适用于图像(JPG,GIF,PNG等)
  
  在IE7中仅适用于不透明的图像
  
  不继承
  
  默认值IE7:最近邻居(低质量)
  
  默认值IE8:双三次(高质量)
  
  自IE9起已过时


看来答案是否定的,IE9不支持。

09-11 10:16