调整画布图像的大小而不会使其模糊

Question

我有一个小图像,我在画布上渲染,像这样:

ctx.drawImage(img, 0, 0, img.width*2, img.height*2);

我希望这能显示一个急剧增大的图像(每个图像像素有4个相同的像素).但是,此代码(在Mac上的Chrome 29中)会产生模糊的图像.在Photoshop术语中,它看起来像是使用"Bicubic"重采样,而不是"最近邻".

在的情况下,将是有用的(例如,一个复古的游戏),是否有可能产生清晰的升迁图像,或者我需要有服务器上的图像的每一个尺寸一个单独的图像文件？

Answer 1

简单地关闭画布'抗锯齿图像 - 不幸的是这个属性仍然是供应商前缀,所以这里是变化:

context.webkitImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

然后绘制图像.

对于尚未实现此功能的旧版本和浏览器,您可以选择使用CSS:

canvas {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming)
    image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
    image-rendering: crisp-edges;               // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE (non standard naming)
}

在线测试