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

13

当我尝试近距离查看像素图时，chrome开始模糊图像。我想这样做，以便即使放大图像，也仍然可以看到清晰的像素，而不是模糊的像素。

google-chrome images pixels

— 螺旋桨
source

1

目前，我认为您无法禁用chrome使用的平滑算法，以在放大图像时对图像的边缘进行平滑处理。除非有扩展名这样做，否则有人会知道我尚不了解的东西。

— DuckDuckGoose

缩放是指ctrl / cmd和+？

— booyaa

@booyas，是的，这就是我的意思。

— 螺旋桨2013年

1

情况有所改善，现在这可能是stackoverflow.com/questions/7615009/…的可能副本。特别是看到namuol的答案在和的jsfiddle jsfiddle.net/namuol/VAXrL/1459这说明什么，我觉得你是想。TL; DR for chrome：“图像渲染：像素化；” 在img和canvas元素上。

— 唐·哈奇

这不是您的问题，但是是否可以至少以更高的质量存储图像，然后缩放会使用额外的细节吗？

— Xonatron

16

更新资料

根据评论：

现在可以在Firefox中：image-rendering：optimizeSpeed; –阿诺

原版的

这不可能直接从浏览器中进行。

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

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

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

图像缩放器
 imagezoom

您可以在浏览器中应用下面的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+                */
    }

— 戴夫
source

不幸的是，这在Chrome上不起作用（在OSX上除外）。

— lapo 2014年

我到底需要/如何在Chrome中“应用”此内容？

— Nyerguds 2014年

4

您是否只是说不可能，然后粘贴一个有效的代码来实际执行此操作？

— 彼得·佩勒

没有@petrpeller，我清楚地写道，不可能直接使用浏览器。然后，我继续说明需要一个插件...为什么您可以阅读这篇文章时问这个问题？！

— 戴夫

2

image-rendering: -webkit-optimize-contrast;在Chrome中工作

— wp学生

2

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

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

如果您有以下任何CSS语句，请尝试将其删除，然后查看图像质量是否提高。

— 巴斯豪斯
source

2

我做了这个小书签来禁用平滑。我将链接保留在书签栏中，然后在要禁用页面上的抗锯齿功能时（通常用于像素图或经典游戏）点击该链接：

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);
  }
})()

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

— 斯蒂芬·尼泽斯基（Stephen Niedzielski）
source

1

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

— 阿诺
source