最后更新：2014-09-12

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

答案是也许有一天。现在，您将不得不求助于 hack-arounds 来获得您想要的东西。

image-rendering

CSS3 的工作草案概述了一个新属性，image-rendering它应该可以满足我的要求：

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

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

像素化：

放大图像时，必须使用“最近邻”或类似算法，使图像看起来只是由非常大的像素组成。缩小时，这与 auto 相同。

标准？跨浏览器？

由于这只是一个工作草案，不能保证这会成为标准。浏览器支持目前充其量是参差不齐的。

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属性的基于画布的解决方案（在较旧的浏览器中不可用，但比预缩放更简单且得到广泛支持）。

现场演示

如果您想测试关于canvas元素的 MDN 文章中讨论的 CSS 属性，我制作了这个小提琴，它应该显示类似这样的东西，模糊与否，取决于您的浏览器：

新答案 7/31/2012

这终于在画布规范中了！

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

图像平滑最近才被添加到画布规范中，并非所有浏览器都支持，但一些浏览器已经实现了此属性的供应商前缀版本。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 像素块。使用图像数据不会太难。

但是，单靠 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
• 铬 22.0.1229.79 米 Windows 7
• Chromium 18.0.1025.168（开发人员构建 134367 Linux）Ubuntu 11.10
• 火狐 3.6.25 视窗 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 不工作）