放大 HTML5 中的图像而不会模糊答案

【问题标题】：Scale up images in HTML5 without blurriness放大 HTML5 中的图像而不会模糊
【发布时间】：2013-03-19 08:26:02
【问题描述】：

有没有办法让 HTML5 中的图像变大而不会变得模糊。

例如，这张图片是 24x24：

如果您改为以 150 的宽度加载它，它会变得模糊。 我想要像素化！

相反，我想更改渲染引擎以显示您在 Photoshop 中看到的内容。像这样的：

我只关心现代浏览器。

【问题讨论】：

【解决方案1】：

如果你只是把它留给浏览器，他们现在会尽量让它流畅（旧的 IE 版本没有）。因此，您最好的选择是将其加载到画布中并自己进行（最近邻）升级。我并不是说这是一个理智的想法，只是把它放在那里。 :)

那个，或者有多个版本的图像并以某种方式切换它们。您可以尝试一些技术，例如 CSS 滑动门。

【讨论】：

【解决方案2】：

经过一些研究：不幸的是，您想要做的是受到浏览器特定限制的限制。 Firefox 有一个有限的实验代码(image-rendering)，它可以强制浏览器停止插入像素，从而导致模糊。

很遗憾，目前没有其他支持的方式来执行此操作。我的建议是让您像我在编辑您的原始帖子时那样简单地缩放图像。

像这样：

【讨论】：