Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

UIWebView에서 HTML5 캔버스로 레티나 디스플레이 이미지 표현하기

UIWebView와 레티나 디스플레이의 관계

iOS 앱 내부에서 UIWebView를 사용해 웹 콘텐츠를 렌더링할 때, 레티나(Retina) 디스플레이 환경에서는 일반적인 방식으로 HTML5 캔버스(canvas)에 이미지를 그리면 화면이 흐릿하게 보이는 문제가 발생합니다.

그 이유는 CSS 픽셀과 실제 물리적 픽셀의 개수가 다르기 때문입니다. 레티나 디스플레이에서는 이 비율을 나타내는 window.devicePixelRatio 값이 2(또는 그 이상)이므로, 캔버스의 실제 해상도도 이 배율에 맞춰 확대해 주어야 선명한 결과물을 얻을 수 있습니다.

레티나 크기 이미지를 캔버스에 넣는 방법

레티나 크기의 이미지를 HTML5 캔버스에 선명하게 배치하려면 아래 코드처럼 devicePixelRatio를 활용해 보세요.

var context = myCanvas.getContext("2d");

// 캔버스의 실제 크기를 devicePixelRatio 배율로 확장
context.attr("width", width * window.devicePixelRatio);
context.attr("height", height * window.devicePixelRatio);

// 좌표 계산은 기존 크기 기준으로 유지하기 위해 스케일 적용
context.scale(window.devicePixelRatio, window.devicePixelRatio);
context.drawImage(img, x, y, width, height);

코드 설명

  • 캔버스 크기 확장: 캔버스의 width와 height를 window.devicePixelRatio만큼 곱해 물리적 픽셀 해상도를 높입니다.
  • context.scale() 호출: 그리기 좌표계를 다시 원래 크기로 되돌려, 이후 drawImage() 등의 API가 기존 논리적 좌표를 그대로 사용할 수 있게 합니다.
  • drawImage() 실행: 확대된 캔버스 위에 이미지를 그리므로, 레티나 화면에서도 흐릿함 없이 선명하게 표시됩니다.

정리

UIWebView 환경에서 레티나 디스플레이에 대응하는 핵심은 캔버스의 실제 해상도와 논리적 좌표계를 분리하는 것입니다. window.devicePixelRatio로 캔버스를 확장한 뒤 scale()로 좌표계를 조정하면, 별도의 고해상도 이미지 변환 작업 없이도 모든 기기에서 깨끗한 화질을 유지할 수 있습니다.