확대 할 때 Chrome에서 작은 이미지가 흐려지는 것을 방지하는 방법은 무엇입니까?

13

픽셀 아트를 가까이에서 보려고하면 크롬이 이미지를 흐리게하기 시작합니다. 이미지가 확대 된 경우에도 흐릿한 이미지가 아닌 선명하고 세밀한 픽셀을 볼 수 있도록 만들고 싶습니다.

google-chrome images pixels

— 추진자
소스

1

현재 크롬에서 사용하는 스무딩 알고리즘을 비활성화하여 이미지를 확대 할 때 이미지의 가장자리를 부드럽게 할 수 있다고 생각하지 않습니다. 그렇게하는 확장 기능이 없거나 누군가 내가 아직 모르는 것을 알고 있지 않는 한.

— DuckDuckGoose

확대 / 축소하여 ctrl / cmd 및 +를 의미합니까?

— booyaa

@booyas, 그래, 그게 내 뜻이야.

— Propeller

1

상황이 개선되었으므로 이제 이것은 stackoverflow.com/questions/7615009/… 의 가능한 복제본입니다 . 특히,에서 namuol의 대답과 jsfiddle 참조 jsfiddle.net/namuol/VAXrL/1459을 당신이 원하는 생각해볼 수있다. TL; 크롬 용 DR : "이미지 렌더링 : 픽셀 화;" img 및 canvas 요소에.

— Don Hatch

귀하의 질문은 아니지만 최소한 이미지를 더 높은 품질로 저장할 수 있습니까? 그런 다음 줌이 추가 세부 사항을 사용합니까?

— Xonatron

16

최신 정보

의견에 따라 :

Firefox에서 가능합니다 : image-rendering : optimizeSpeed; – 아르노

기발한

이것은 브라우저에서 직접 가능하지 않습니다.

스무딩은 알고리즘을 통해 적용되며 대부분의 최신 브라우저는 비슷하며 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+                */
    }

— 데이브
소스

불행히도 이것은 Chrome에서 작동하지 않습니다 (OSX 제외).

— lapo

Chrome에서 이것을 어떻게 '적용'해야합니까?

— Nyerguds

4

가능하지 않다고 말한 다음 실제로 작업 코드를 붙여 넣었습니까?

— Petr Peller

@ petrpeller는 없습니다. 브라우저에서 직접 사용할 수는 없다는 것을 분명히 썼습니다. 그런 다음 플러그인이 필요하다고 설명합니다 ... 게시물을 읽을 때 왜이 질문을합니까?!?

— Dave

2

image-rendering: -webkit-optimize-contrast;크롬에서 일

— wp student

2

이미지와 함께 GPU 렌더링을 사용할 때 Chrome 및 Firefox에서 일부 문제를 발견했습니다. 예 :

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

다음과 같은 CSS 문이 있으면 제거하고 이미지 품질이 향상되는지 확인하십시오.

— 바우 하우스
소스

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

Bookmarklet이 매력적인 이유는 확장 프로그램에 "방문한 웹 사이트의 모든 데이터를 읽고 변경"권한을 부여하는 것을 좋아하지 않기 때문입니다.

— 스티븐 니 지엘 스키
소스

1

다음 CSS로 2019 년에 가능합니다 : image-rendering: pixelated;

— 아르노
소스