Canvas#drawImage로 축소할 때 깨끗하게 표시하는 몇 가지 방법

Canvas#drawImage 를 사용하여 상당히 큰 이미지를 축소 표시하면 화려하게 쟈기가 발생할 수 있습니다. (drawImage의 디폴트 필터가 속도 우선 같아, 현재 이와 같이 되어 버린다든가)

antialias 를 쓸 수 있을까, 좀 더 깨끗하게 표시하는 방법이 없는지 여러가지 찾아 보았습니다.

방법 1. canvasContext.drawImage(source, sx, sy, sw, sh, tx, ty, tw, th) 를 사용해 렌더링 하는 방법

이미지 1과 2의 Original이 이것입니다

방법 2. HTML5 Rocks에서와 같이 ratio = devicePixelRatio / backingStoreRatio를 계산하고 캔버스 크기 (width, height) 및 캔버스 뷰 크기 (style.width, style.height)를 설정하고 canvasContext.scale (rario, ratio )를 실행하고 디스플레이의 표현 능력을 활용하는 방법

이미지 1과 2의 backingStoreRatio가 이것입니다 (toRetina는 이것의 변종입니다)

방법 3. StackOverflow에서 볼 수 있듯이 downsampling을 여러 번 수행합니다 (1.0 → 0.5 → 0.25, ...) 부드럽게하는 방법

이미지 1과 2의 antialiasing이 이것입니다

속도 및 비용 절충이 발생합니다

Example

이미지 1MacBookPro Retina Display
이미지 2DELL 외부 Display

디스플레이 품질

이러한 간단한 예라면,
Retina Display의 표시 품질은 方法2 > 方法3 > 方法1이며,
비 Retina Display의 표시 품질은 方法3 > 方法2 > 方法1입니다.

jsfiddle에서 실제로 시도 할 수 있습니다.