섬네일 이미지 리사이저, 서버에 안 올리는 이유
네이버 블로그 목록 화면은 썸네일을 정사각형(1:1)으로 보여줘요. 가로로 긴 사진을 올리면 위아래가, 세로로 긴 사진을 올리면 좌우가 잘려요. 보통 600×600, 권장 800×800 정도면 흐릿하지 않게 나와요.
"섬네일 이미지 리사이저"는 이 규격에 맞게 사진 가운데를 잘라주는 도구예요. 근데 만들면서 제일 신경 쓴 건 크기가 아니라 사진을 어디로도 보내지 않는다는 점이었어요.
보통 이런 도구는 서버로 이미지를 업로드하고, 서버에서 처리한 다음, 결과물을 다시 내려받는 방식으로 만들어요. 그런데 그러면 남의 블로그에 쓸 사진을 굳이 다른 사이트 서버에 한 번 올렸다 내려받는 셈이 돼요. 속도도 느려지고, 이미지가 서버에 잠깐이라도 남는다는 점도 마음에 걸렸어요.
그래서 이번엔 브라우저 안에서 전부 끝내는 방식으로 만들었어요. 이미지를 고르면 브라우저의 Canvas 기능으로 그 자리에서 바로 잘리고 리사이즈되고, 다운로드도 브라우저 안에서 바로 파일로 떨어져요. 서버로는 사진 데이터가 한 바이트도 안 나가요.
크기(479×479, 600×600, 800×800, 1000×1000)와 형식(JPG·PNG)만 고르면 되고, 나머지는 사진을 넣자마자 미리보기로 바로 보여요.