Canvas area exceeds the maximum limit

 

현재 회사에서 개발중인 서비스에서, 이미지를 크롭해서 업로드하는 기능이 아이폰 사파리에서만 작동하지 않는 오류를 발견했다.

문제의 원인은, 이미지를 크롭할 때 webAPI 인 canvas 를 사용하는데,  iOS 사파리에서는 canvas의 픽셀 너비가 일정 크기를 넘어가면 캔버스를 그릴 수 없게 하는 스펙이 있었던 것이다.

 

그런데 현재 iOS 에서 제한하는 픽셀 크기는 약 4096x4096 인데, 내가 올린 이미지는 2000 x 2000 이 채 넘지 않았다.

 

그래서 캔버스를 그리는 로직을 재점검해봤더니, 크롭 영역만큼 캔버스 너비를 그리는 계산에 devicePixelRatio 라는 값이 포함되어 있었다.

이 값이 심상치 않아서 알아봤더니, devicePixelRatio 는 아이폰과 같은 고해상도 디스플레이 디바이스의 경우 CSS 에서 표현하는 1px 에 실제로는 그 이상을 그릴 수 있는 값이라는 걸 알았다. 예를 들어 devicePixelRatio 가 2 라고 하면, CSS 1px 당 실제로는 2px 을 그릴 수 있는 것이다. 

 

내가 가지고 있는 아이폰 14mini 의 경우는 devicePixelRatio 가 3이었고, 따라서 실제로는 2000x2000 가량의 이미지를 약 9000x9000 이 넘는 크기로 캔버스에 그리려 했기에 오류가 났던 것이다.

 

문제 해결책은 간단했다. 캔버스 너비를 그리는 계산에 디바이스별로 다를 수 있는 devicePixelRatio 를 넣지 않고, 항상 이미지의 크기를 그대로 사용하도록 했다.

 

예상되는 앞으로의 문제는, 실제로 4096x4096 이 넘는 이미지를 유저가 올리려 할 때인데, 이는 안내 문구 등 기획으로 풀어야 하지 않을까 싶다.

 

 

---

+ 10.14 추가

 

아래는 이 글을 작성하고 다음 날 들었던 생각인데, 귀찮아서 생각만 하고 있다가 들른 김에 쓴다.

devicePixelRatio 관련 오류를 경험하면서 배운 점은 'devicePixelRatio 오류를 어떻게 해결해야 하는 가' 따위에서 끝나선 안될 것 같다는 생각이 들었다.

웹 브라우저에서 표현하는 '내가 생각한 1px이 실제로는 1px 이 아닐 수도 있다' 는 점이 중요한 것!

 

 

 

 

---

참고자료

 

https://pqina.nl/blog/canvas-area-exceeds-the-maximum-limit/