KineticJS 图像调整大小模糊

【问题标题】：KineticJS image resize is blurryKineticJS 图像调整大小模糊
【发布时间】：2013-06-27 23:40:29
【问题描述】：

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

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

【问题讨论】：

标签： image zooming resolution kineticjs blurry

【解决方案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;
}

这也可能有帮助Disable Interpolation when Scaling a <canvas> 这是从上面链接http://jsfiddle.net/VAXrL/21/借来的小提琴

也请参考这个问题Resizing an image in an HTML5 canvas

【讨论】：