HTML5 캔버스에서 drawImage()로 이미지를 축소할 때 계단 현상(지그재그 픽셀, aliasing)이 나타난다면, 리샘플링 품질을 설정하고 이미지를 단계적으로 줄이는 방식으로 앤티앨리어싱을 적용할 수 있습니다.
1. imageSmoothingQuality 속성 설정하기
캔버스 컨텍스트의 imageSmoothingQuality 속성에 "low", "medium", "high" 중 하나의 값을 지정하면 됩니다. 값이 높을수록 더 부드러운 결과물을 얻을 수 있지만, 그만큼 처리 속도가 느려질 수 있습니다.
ctx.imageSmoothingQuality = "low"; // 또는 "medium", "high"2. 오프스크린 캔버스로 단계적 축소하기
이미지를 한 번에 크게 줄이면 픽셀 정보가 많이 손실되어 화질 저하가 두드러집니다. 이럴 때 오프스크린(off-screen) 캔버스를 활용해 이미지를 절반씩 여러 번 나누어 줄이면 훨씬 자연스럽고 선명한 결과를 얻을 수 있습니다.
먼저 오프스크린 캔버스를 생성하고, 원본 이미지 크기의 절반으로 설정한 뒤 이미지를 그립니다.
var c = document.createElement('canvas'),
ocx = c.getContext('2d');
// 캔버스 크기를 원본의 절반으로 설정
c.width = img.width * 0.5;
c.height = img.height * 0.5;
// 원본 이미지를 절반 크기로 그리기
ocx.drawImage(img, 0, 0, c.width, c.height);이후 원하는 최종 크기에 도달할 때까지 위 과정을 반복합니다.
// 이미지를 다시 절반으로 줄여서 그리기 (필요한 만큼 반복)
ocx.drawImage(c, 0, 0, c.width * 0.5, c.height * 0.5);3. 알아두면 좋은 팁
- imageSmoothingEnabled: 기본값은 true이며, false로 설정하면 스무딩이 비활성화되어 픽셀이 거칠게 표시됩니다.
- 브라우저 호환성: "high" 품질 옵션은 브라우저마다 구현 방식과 성능 차이가 있으므로, 주요 대상 브라우저에서 직접 테스트해 보는 것이 좋습니다.
- 성능 최적화: 단계적 축소 방식은 한 번에 축소하는 것보다 연산 횟수가 늘지만, 시각적 품질 면에서 훨씬 우수한 결과를 제공합니다.