React native - canvas 이미지 흐릿한 현상 해결하기

 

 

회사에서 React native 사용시, 특정 렌더러에서 이미지가 흐릿한 현상이 발생하였다.

픽셀아트를 사용해야하는데, 해당 canvas에서 pixelated를 제공안한다고 한다.

그래서, 이미지 사이즈를 늘려서 해결하려고 한다고 하였다. 하지만 2가지 문제가 발생한다.

- 사이즈가 그만큼 늘어나서 느려진다.

- 디자이너가 다시 작업해야한다.

 

이 문제에 대해서 고민하다가 2가지 방법을 생각해냈다.

1. 해당부분만 webview를  띄운다.

2. image pixelated를 구현한다. 

 - image pixlated는 k nearest neighbor 알고리즘을 이용하므로, k nearest neighbor를 구현하면 해결이 될 것이다.