感谢 d3.js (类似于 this ),我创建了一个简单的图像查看器(带有网格和图像),带有 Canvas (仅图像)和一些 svg 网格线。我使用 d3.js 中的缩放功能来缩放和平移我的图像/网格线。
Canvas 上的图像应使用最近邻插值。我设置了很多风格元素来实现这个目标。 Chrome 和 Firefox 运行良好,但我在使用 Internet Explorer 9 时遇到问题(我需要支持 ie9)。在 IE9 中图像总是模糊的。
Internet Explorer 9 是否支持 Canvas 的最近邻插值?
我的设置正确吗?
我在 d3.js 中的 Canvas 代码:
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 and 8 supports the non-standard -ms-interpolation-mode property with two values (bicubic and nearest-neighbor):
applies only to images (JPG, GIF, PNG, ...)
in IE7 only for images without transparency
does not inherit
default value IE7: nearest-neighbor (low quality)
default value IE8: bicubic (high quality)
obsolete as of IE9
看来答案是否定的,IE9 不支持。
关于javascript - Canvas 中的最近邻插值(internet explorer 9),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30189763/