☰

如何防止Chrome在放大時使小圖像模糊？

tag-icon • tag-icon google-chrome images pixels
如何防止Chrome在放大時使小圖像模糊？

當我嘗試近距離查看像素藝術時，Chrome 開始使影像模糊。我想讓它即使在圖像放大時，我仍然可以看到清晰的細節像素，而不是模糊的像素。

答案1

更新

根據評論：

現在在 Firefox 中可以實現： image-rendering: optimizationSpeed; ——阿諾

原來的

這不可能直接從瀏覽器實作。

平滑是透過演算法應用的，大多數現代瀏覽器都會執行類似的操作，並且在 IE、Firefox 和 Chrome 中無法將其關閉。

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

你確實還有其他選擇，這是上面連結中的兩個要點，都是 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 語句，請嘗試將其刪除並查看圖像品質是否會提高。

相關內容