缩放<canvas>时禁用插值

注意：这与放大时现有画布元素的呈现方式有关，而与线条或图形在画布表面上的呈现方式无关。换句话说，这与缩放元素的插值有关，而与在画布上绘制的图形的抗锯齿无关。我不关心浏览器如何画线；我关心的是浏览器在放大时如何渲染canvas元素本身。

是否可以通过编程更改画布属性或浏览器设置以在缩放<canvas>元素时禁用插值？跨浏览器的解决方案是理想的，但不是必需的。基于Webkit的浏览器是我的主要目标。性能非常重要。

这个问题最相似，但不能充分说明问题。对于它的价值，我尝试image-rendering: -webkit-optimize-contrast无济于事。

该应用程序将是用HTML5 + JS编写的“复古” 8位样式游戏，以明确我的需求。

为了说明，这是一个示例。（现场版）

假设我有一张21x21的画布...

<canvas id='b' width='21' height='21'></canvas>

...具有CSS的元素使元素大5倍（105x105）：

canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */

我在画布上绘制一个简单的“ X”，如下所示：

$('canvas').each(function () {
    var ctx = this.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(21,21);
    ctx.moveTo(0,21);
    ctx.lineTo(21,0);
    ctx.stroke();
});

左图是Chromium（14.0）渲染的图像。右边的图像是我想要的（手绘用于说明目的）。

上次更新时间：2014-09-12

是否可以通过编程更改画布属性或浏览器设置以在缩放元素时禁用插值？

答案可能是有一天。目前，您必须借助黑客手段来获得所需的东西。

image-rendering

CSS3的工作草案概述了一个新属性，image-rendering该属性应该可以实现我想要的功能：

图像渲染属性向用户代理提供了有关在缩放图像时保留哪些方面最重要的提示，以帮助用户代理选择适当的缩放算法。

该规范概述接受三个值：auto，crisp-edges，和pixelated。

像素化：

在按比例放大图像时，必须使用“最近邻居”或类似算法，以便图像看起来仅由非常大的像素组成。缩小时，这与自动相同。

标准？跨浏览器？

由于这只是工作草案，因此无法保证这将成为标准。当前，对浏览器的支持充其量是最多的。

Mozilla开发人员网络有一个非常详尽的页面，专门介绍当前的技术水平，我强烈建议阅读。

Webkit开发人员最初选择暂时将其实现为-webkit-optimize-contrast，但是Chromium / Chrome似乎并没有使用实现此功能的Webkit版本。

更新时间：2014-09-12

Chrome 38现在支持image-rendering: pixelated！

Firefox的一个错误报告可以image-rendering: pixelated实现，但-moz-crisp-edges现在可以使用。

解？

因此，到目前为止，最跨平台，仅CSS的解决方案是：

canvas {
  image-rendering: optimizeSpeed;             /* Older versions of FF          */
  image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated;                 /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}

遗憾的是，这还不适用于所有主要的HTML5平台（尤其是Chrome）。

当然，可以使用最近邻插值法将图像手动放大到javascript的高分辨率画布表面上，甚至可以在服务器端预先缩放图像，但是在我的情况下，这代价高昂，因此这不是一个可行的选择。

ImpactJS使用纹理预缩放技术来解决所有这些FUD。Impact的开发者Dominic Szablewski 写了一篇非常深入的文章（他甚至在研究中引用了这个问题）。

请参阅Simon的答案，以获取基于画布的基于该imageSmoothingEnabled属性的解决方案（在旧版浏览器中不可用，但比预缩放更简单，并且得到广泛支持）。

现场演示

如果你想测试的MDN文章中讨论的CSS属性的canvas元素，我做了这个小提琴应显示这样的事情，模糊或没有，这取决于你的浏览器：

新答案7/31/2012

这终于在画布规格中！

规范最近添加了一个名为的属性imageSmoothingEnabled，该属性默认为true并确定在非整数坐标上绘制或按比例绘制的图像是否将使用更平滑的算法。如果将其设置为，false则使用最近邻，从而产生较不平滑的图像，而只是制作较大的像素。

图像平滑化只是最近才添加到canvas规范中，并非所有浏览器都支持，但是某些浏览器已经实现了该属性的供应商前缀版本。在上下文中mozImageSmoothingEnabled，Firefox，webkitImageSmoothingEnabledChrome和Safari中存在它们，并将它们设置为false将阻止发生抗锯齿。不幸的是，在撰写本文时，IE9和Opera尚未实现此属性（供应商带有前缀或其他方式）。

预览：JSFiddle

结果：

编辑7/31/2012-此功能现在在画布规范中！在此处查看单独的答案：

https://stackoverflow.com/a/11751817/154112

以下是后代的旧答案。

根据您想要的效果，您可以选择以下一种方法：

var can = document.getElementById('b');
var ctx = can.getContext('2d');
ctx.scale(5,5);
$('canvas').each(function () {
    var ctx = this.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(21,21);
    ctx.moveTo(0,21);
    ctx.lineTo(21,0);
    ctx.stroke();
});

http://jsfiddle.net/wa95p/

这创建了这个：

可能不是您想要的。但是，如果您只是想使模糊为零，那将是问题所在，因此我会以防万一。

一个更困难的选择是使用像素操纵并自己编写算法以完成工作。第一幅图像的每个像素变为新图像上的5x5像素块。使用imagedata并不难。

但是，仅Canvas和CSS并不能帮助您将一个缩放到另一个缩放并达到您想要的效果。

在谷歌浏览器中，不会插入画布图像图案。

这是从namuol答案http://jsfiddle.net/pGs4f/编辑的一个工作示例

ctx.scale(4, 4);
ctx.fillStyle = ctx.createPattern(image, 'repeat');
ctx.fillRect(0, 0, 64, 64);

Saviski 在这里阐述的解决方法很有希望，因为它适用于：

• Chrome 22.0.1229.79 Mac OS X 10.6.8
• Chrome 22.0.1229.79 m Windows 7
• Chromium 18.0.1025.168（Developer Build 134367 Linux）Ubuntu 11.10
• Firefox 3.6.25 Windows 7

但是在以下情况下不起作用，但是使用CSS图像渲染可以达到相同的效果：

• Firefox 15.0.1 Mac OS X 10.6.8（图像渲染：-moz-crisp-edges在此有效）
• Opera 12.02 Mac OS X 10.6.8（图像渲染：-o-crisp-edges在此有效）
• Opera 12.02 Windows 7（图像渲染：-o-crisp-edges在此有效）

这些是有问题的，因为ctx.XXXImageSmoothingEnabled不起作用并且图像渲染不起作用：

• Safari 5.1.7 Mac OS X 10.6.8。（图像渲染：-webkit-optimize-contrast不起作用）
• Safari 5.1.7 Windows 7（图像渲染：-webkit-optimize-contrast不起作用）
• IE 9 Windows 7（-ms-interpolation-mode：nearest-neighbor无效）