javascript - canvas context 이미지 열화

prologue

이미지 편집하는데 이미지 열화가 왜 생기나요
> 몰?루

 
 

이미지를 편집하고 올리면 이미지 열화가 심하네요
... 클레임을 받았다
하지만 여러 가지 이미지를 사용해서 편집하고 다운로드하여봤지만 문제가 없었다.
무슨 이미지 길래 그랬을까

 

이미지 공개

 
cropper.js라는 라이브러리를 사용해서 이미지 편집을 거치는 과정이 있었다.
사실 단순 crop 하는 정도의 내용이라 문제 될 게 없었고 화질 열화는 발견하지 못했다.
이 프로젝트는 오랜 시간 끌리다 보니 모든 사람들이 증오로 가득 찬 상태라서 그러한 짜증의 하나일 거라 생각했다.
 
그 이미지를 전달받기 전까지는.
 
이미지는 엑셀을 캡처한 후 보내는 내용이었다.
(내용은 공개는 어렵기 때문에 문제가 있는 부분만 보여드립니다)

 

원본 이미지

처리된 이미지

 

투정 부릴만했네..

 

문제점 파악

 
이미지는 분명 처리된 내용이 있었다. 이미지 파일 크기가 더 커졌다..(그런데 어떻게 이렇게 될까..)
생각해 볼 수 있는 문제점은
1. cropper.js의 자체 문제
2. 개발자가 수정한 부분 문제
 
라고 생각해 볼 수 있었다. 하지만 브라우저 별로 처리된 결과가 다르다는 점이 이상했다.
 
사실 파이어폭스에서는 클레임을 받을 만큼의 결과물이 아니긴 해서.. 몰랐지만
크롬으로 테스트할 때, 위의 이미지처럼 출력되었다.
 
브라우저 엔진 차이 일까? 해서 canvas 요소의 context에서
imageSmoothingEnable, imageSmoothingQuality가 영향을 주는 요소라고 생각하여
Chrome, Edge, Firefox 에서 모두 옵션 끄고 켜고, 품질을 3가지로 변경해 가면서 테스트했지만 눈에 띄는 결과는 없었다.
 
(크로미움이 이상하게 연산해 버리는 걸 어떻게 하라는 거지...)
 
이걸 백엔드에서 처리하는 걸 만드는 건 매우 비효율적이라고 생각했다. (하지만 해야 하나..?)
 
그래서 cropper.js 에서 canvas 관련 context를 조금 더 살펴보다가

(중략)
var params = [-destWidth / 2, -destHeight / 2, destWidth, destHeight];
canvas.width = normalizeDecimalNumber(width);
canvas.height = normalizeDecimalNumber(height);
context.fillStyle = fillColor;
context.fillRect(0, 0, width, height);
context.save();
context.translate(width / 2, height / 2);
context.rotate(rotate * Math.PI / 180);
context.scale(scaleX, scaleY);
context.imageSmoothingEnabled = imageSmoothingEnabled;
context.imageSmoothingQuality = imageSmoothingQuality;

 
이 부분이 눈에 들어왔다.

context.translate(width / 2, height / 2);

 
파일의 픽셀은.. (604 x 717)이니
정수가 들어가야 할 것 같은 부분에 소수점이라니..
한 번 바꾸기라도 해 보자.
 

수정하기

context.translate(Math.round(width / 2, 0), Math.round(height / 2, 0));

 
이렇게 수정했다.
결과는 잘 나왔다..
크롬도 엣지도 Firefox도 결과물이 좋아졌다.
 

파이어폭스에서의 결과물

 

결론

 
- 브라우저 엔진에서 canvas context 중 translate에 소수점이 들어오게 되면 픽셀이 틀어지는 현상이 있었다.
- 브라우저 별로 이미지 처리방식이 조금 다르다.
 
cropper.js라는 외부 라이브러리를 이용한 부분이라 찾기 어려웠지만
잘 뒤적뒤적해 보면 해결할 수 있다.