是否可以通过编程更改画布属性或浏览器设置以在缩放元素时禁用插值?
答案可能是有一天。目前,您必须借助黑客手段来获得所需的东西。
CSS3的工作草案概述了一个新属性,image-rendering该属性应该可以实现我想要的功能:
图像渲染属性向用户代理提供了有关在缩放图像时哪些方面最重要保留的提示,以帮助用户代理选择适当的缩放算法。
该规范概述接受三个值:auto,crisp-edges,和pixelated。
像素化:
在按比例放大图像时,必须使用“最近邻居”或类似算法,以便图像看起来仅由非常大的像素组成。缩小时,这与自动相同。
标准?跨浏览器? 由于这只是工作草案,因此无法保证这将成为标准。目前,对浏览器的支持充其量是最多的。
Mozilla开发人员网络上有一个非常详尽的页面,专门介绍当前的技术水平,我强烈建议阅读。
Webkit开发人员最初选择暂时将其实现为-webkit-optimize-contrast,但Chromium / Chrome似乎并没有使用实现此功能的Webkit版本。
更新
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的高分辨率画布表面上,甚至可以在服务器端预先缩放图像,但是在我的情况下,这代价高昂,因此这不是一个可行的选择。