'HTML5'에 해당하는 글 1건

이 역시 티몬 구매후기에서 이미지 업로드와 관련된 기능을 적용하면서 나온 내용을 정리 차원에서 적어 둡니다.


구매후기 작성 시 이미지를 선택해서 업로드를 하게 되는데, 기존에는 이미지의 사이즈를 제한하는 기능이 있었고 이로 인해 이미지 제한에 걸려 이미지를 업로드 하지 못하거나, 업로드 된 원본 이미지도 용량이 너무 큰 문제가 있었습니다. (장당 3MB)


아무런 제약 없이 이용자는 이미지를 마음껏 올릴 수 있으려면 이미지 리사이즈가 필요한데, 서버단에서 용량 리사이징을 하게 되면 아까운 네트웍 비용이 들어가게 되므로 클라이언트 단에서 용량을 줄일 필요가 있었습니다.

그래서 사용하게 된 것이 HTML5의 Canvas 기능이죠.

물론 이전에 HTML5를 제대로 사용해 본 적이 없어서...

모든 기능은 최고의 방법이 구글링을 통해 적용했습니다.

그리고 HTML5의 Canvas가 적용되지 않는 브라우저를 위해서라도 (망할 IE -.-;;) 기존 소스 코드는 남겨두고 분기 처리를 해야 했습니다.


기본적으로 jQuery를 사용 했습니다.

아... 그리고 기본적으로 저는 자바스크립트를 잘 못하는 개발자이므로 발코딩이 나와도 이해해 주세요 ^^

간단한 설명은 주석으로 달았습니다.



<html5의 Canvas를 사용해서 이미지 리사이징이 가능한지 판별하는 메소드>


<html form>


<file input을 통해 file을 선택했을 경우 동작하는 메소드>


<String을 Binary로 변환해 주는 메소드. 구글링 결과물로 정확한 내용은 검토해 보지 못함>


<리사이징 된 파일을 업로드 하는 메소드>







WRITTEN BY
체리필터
프로그램 그리고 인생...

받은 트랙백이 없고 , 댓글  4개가 달렸습니다.
  1. 안녕하세요.
    서버로 전송해서 서버에서 파일 저장 처리하는 부분은 어떻게 구현하셨는지 알려 주실 수 있을까요? ^^
    지금 jsp 환경에서 하고 있습니다.
    • 서버 저장은 노멀한 내용이라서 그냥 구글링 하면 나오는 거랑 다를 거 없을 것 같습니다.
      파일 객체이니 파일 객체 받아서 저장하는 일반적인 소스 검색해 보시면 좋을 것 같습니다.
  2. 후기 업로드 이미지 작업 중이었는데, 도움이 많이 되었습니다.
    완전 감사합니다!
secret