html - 放大 HTML5 中的图像而不会模糊

Question

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

例如，此图像是 24x24：在此处输入图像描述

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

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

在此处输入图像描述

我只关心现代浏览器。

score 4 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

像这样：在此处输入图像描述

2 回答 2