react-cropper 이미지 퀄리티 낮아지는 현상

개요 react-cropper를 사용하여 이미지를 저장하게 될 때, 퀄리티가 낮아지는 현상이 있다. 일반적인 사진이미지는 괜찮지만 만들어진 이미지 (pixel art)의 경우 그 차이가 크게 나게 된다. 해결방법 아래의 코드를 추가해줘서 픽셀을 보간하면 된다. 다만 보간을 하는 형태이기 때문에 이미지가 약간 blur된 효과가 생기는 것을 알 수 있다. getCroppedCanvas({ ...args, imageSmoothingEnabled: true, imageSmoothingQuality: 'high' }) 출처 mdn - canvas

2022.03.04