이미지 크기를 조정할 때 앤티앨리어싱을 비활성화하는 방법은 무엇입니까?

이미지 크기를 조정할 때 앤티앨리어싱 비활성화

배경

이미지를 확대할 때 앤티앨리어싱을 사용하여 픽셀 간 부드러운 전환을 만들어 들쭉날쭉한 가장자리를 줄이는 경우가 많습니다. . 그러나 어떤 경우에는 특히 픽셀 아트나 블록형 그래픽을 처리할 때 단단한 가장자리를 유지하는 것이 바람직할 수 있습니다.

CSS 솔루션

전통적으로 CSS에는 앤티앨리어싱을 비활성화하는 특정 플래그가 없습니다. 그러나 여러 공급업체별 속성에서 이 기능을 제공할 수 있습니다.

• image-rendering: -moz-crisp-edges; (Firefox)
• 이미지 렌더링: -o-crisp-edges; (오페라)
• 이미지 렌더링: -webkit-optimize-contrast; (Chrome 및 Safari)
• -ms-보간-모드: 최근접 이웃; (IE8 )

이러한 속성을 이미지에 적용하면 선명한 가장자리에 우선 순위를 부여하고 앤티앨리어싱 효과를 줄입니다.

구현

모든 배경 이미지에 대해 앤티앨리어싱을 비활성화하려면 CSS 스타일시트에서 다음을 사용하세요. 코드:

img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

CSS가 아닌 솔루션

CSS가 가장 간단한 솔루션을 제공하지만 배경 이미지에서는 항상 작동하지 않을 수도 있습니다. 이러한 경우 JavaScript 또는 이미지 편집 도구와 같은 대체 방법을 고려할 수 있습니다.

• HTMLCanvasElement: imageSmoothingEnabled 매개변수가 false로 설정된 drawImage() 메서드를 사용하세요.
• ImageMagick: -filter NearestNeighbor 옵션을 이미지.

위 내용은 이미지 크기를 조정할 때 앤티앨리어싱을 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!