image - KineticJS 图像调整大小模糊

Question

如果我有一个高分辨率图像并使用 kinetic.image 宽度和高度属性来缩小它，我发现当我使用 stage.setScale() 放大时，图像与原始图像相比是模糊的。

在舞台上放大图像以保持其原始清晰度但在默认 1:1 舞台比例上显示为小于原始分辨率的选项有哪些？

Answer 1

我实际上有同样的问题，但尝试将 css 样式添加到画布以覆盖浏览器如何呈现缩放图像的默认行为，它不是特定于 kineticJS

canvas {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

在缩放 <canvas> 时禁用插值也可能有帮助，这是从上面的链接http://jsfiddle.net/VAXrL/21/ 借来的小提琴

另请参阅此问题Resizing an image in an HTML5 canvas