☰

如何防止 Chrome 放大小图像时变得模糊？

tag-icon • tag-icon google-chrome images pixels
如何防止 Chrome 放大小图像时变得模糊？

当我尝试近距离查看像素艺术时，chrome 开始使图像模糊。我想让图像即使放大，也仍然能够清晰地看到像素细节，而不是模糊不清。

答案1

更新

根据评论：

现在可以在 Firefox 中实现：图像渲染：optimizeSpeed； – Arnaud

原来的

这无法通过浏览器直接实现。

平滑处理是通过算法实现的，大多数现代浏览器都采用类似算法，而在 IE、Firefox 和 Chrome 中无法关闭此功能。

http://productforums.google.com/forum/#!topic/chrome/AIihdmfPNvE

你确实还有其他选择，这里是上面链接中的 2 个要点，都是 Chrome 插件。

图像调整器
图像缩放

您可以应用浏览器中的 CSS 代码如下，这将关闭它！

img { 
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: pixelated;                 /* Chrome as of 2019   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
    }

答案2

2019 年可能采用以下 CSS：image-rendering: pixelated;

答案3

我制作了这个书签小工具来禁用平滑功能。我将链接保留在书签栏中，当我想禁用页面上的抗锯齿功能时，点击它，通常用于像素艺术或经典游戏：

javascript:(function pixelate() {
  const sheet = document.createElement('style');
  sheet.innerHTML = 'img { image-rendering: pixelated; }';

  document.head.appendChild(sheet);

  for(let i = 0; i < frames.length; ++i) {
    frames[i].document.head.appendChild(sheet);
  }
})()

书签小程序之所以具有吸引力，是因为我不喜欢授予扩展程序“读取和更改您所访问的网站上的所有数据”的权限。

答案4

我注意到 Chrome 和 Firefox 在使用 GPU 渲染图像时存在一些问题。例如：

img {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

如果您有任何包含以下内容的 CSS 语句，请尝试删除它们并查看图像质量是否提高。

相关内容