[Javascript] 모바일 이미지 업로드시 이미지 회전 현상 해결

안녕하세요. 글쓰는 개발자입니다.

프로젝트를 진행하면서, 프로필 사진을 모바일에서 업로드 할 경우, 이미지가 회전되는 이슈가 있었습니다. 구글링을 해보니, 다른 분들도 많이 겪은 문제였다는 생각이 들었습니다. 빈번히 발생하는 이 문제를 해결한 방법에 관해 포스팅 시작하겠습니다.

 

1. 라이브러리 사용

저는 아래 링크를 통해, 사용할 수 있는 Javascript Load Image 라이브러리를 사용했습니다. 이 중에서 load-image.all.min.js 를 받았는데요. 이유는 다 받는게 제일 편하기 때문입니다.

https://github.com/blueimp/JavaScript-Load-Image

blueimp/JavaScript-Load-Image

 

2. 파일업로드 적용시키기

 

file이 Input될 때, 라이브러리의 loadImage 함수를 사용합니다. 아래 코드 블럭의 loadImage(files[0] ... 부분을 참고하세요. 그 다음 .toBlob()함수를 사용해  canvas를 blob data로 변환하는 작업을 진행합니다. 아래 코드의  var roateteFile 부분을 참고하시면 되겠습니다. 그리고 이미지 파일의 orientation을 잡아주는 orientation:true 부분을 넣어주면 완료입니다.

<script type="text/javascript" src="/resources/di/js/load-image.all.min.js"></script>

function rotateImage(e){
   
   
   var files = e.target.files;
   var fileType = files[0].type;
   
   loadImage(files[0], function(img, data) {
       img.toBlob(function(blob){
       
       var rotateFile = new File([blob], files[0].name, {type:fileType});
         sel_file = rotateFile;
         var reader = new FileReader();
         
         reader.onload = function(e){
            $("#img").attr("src",e.target.result);
         }
         
         reader.readAsDataURL(rotateFile);

       },fileType)},
    { orientation:true}
    
    );//end loadImage  
   
}