[js] 이미지 업로드시 이미지 회전 현상

티스토리 뷰

카테고리 없음

[js] 이미지 업로드시 이미지 회전 현상

진열사랑 2021. 3. 24. 18:27

출처: wickedmagica.tistory.com/239

이미지의 가로, 세로가 변경되어 등록되는 경우가 존재한다.

이러한 이유는 EXIF( Exchangeable Image File Format )의 회전값 변경이 반영되지 않기에 생기는 이유인데.

아래 이미지는 초기 스마트 폰에서 자주 볼 수 있었던 문제이다.

( 자이로 센서( Gyro Sensor ) 등의 기술 발전으로 이런 문제는 많이 해결 되었지만, 이미지의 편집등 다른 작업 과정으로 현재에도 나타난다.)

가로로 찍은 이미지의 경우 스마트폰 상에서는 분명 정상적으로 보여주지만.

실제 이미지의 EXIF 값을 보면 회전정보( Orientation )가 90° CW 가 적용되어 있는것을 알 수 있다.

이를 회전정보 값을 브라우저에서는 인식하지 않고 보여지는 문제이다.

# EXIF( Exchangeable Image File Format ) 란?

디지털 카메라 등에서 사용되는 이미지 파일 메타데이터 포맷으로,

카메라가 촬영한 사진, 녹음파일에 시간 등의 각종 정보를 담기 위해 개발되었다. 즉,

JPEG, TIFF 6.0과 RIFF, WAV 포맷에 이미지나 소리에 대한 정보를 추가로 기록할 수 있다.

디지털카메라의 보급으로 널리 활성화되었고 이미지 메타데이터의 사실상 표준 지위에 있다.

EXIF 데이터는 이미지 파일의 일부로 저장되며,

EXIF 데이터를 지원하는 소프트웨어 사용 시 이미지를 변경해도 데이터를 보존한다.

출처 : 나무위키( https://namu.wiki/w/EXIF )

간단하게 이미지 파일 하나를 선택하여 마우스 오른쪽 버튼을 클릭하고

오른쪽으로 회전( T ) 을 선택해 보자.

회전 정보 : 90° CW 로 반영된 것을 확인할 수 있다.

이 렇게 회전된 파일을 <img src="스토브리그.jpg">로 올려서 브라우저로 확인을 해 본다면.

# 소스코드

<html>

<head>

<title>:: 스토브리그 ::</title>

/* image-orientation:from-image; */

/* 포스팅 작성일 기준으로 파이어 폭스만 가능 */

</style>

</head>

<body>

</body>

</html>

# 출력결과

회전 정보 : 90° CW가 반영이 <img> 태그를 사용한 경우

브라우저에서 다시 정방향으로 돌려서 출력하는 모습을 확인 할 수 있다.

그렇지만 그냥 브라우저상에서 이미지 경로를 직접 입력하여 호출하는 경우

위 출력결과처럼

현재 파이어 폭스 브라우저의경우 CSS에 image-orientation:from-image; 를 넣어주는 것만으로도

회전정보 값을 읽어들여 <img> 태그에 반영할 수 있지만

아직까지 크롬등의 다른 브라우저에서는 CSS4의 실험적 기능이기에 적용되어 있지 않다고 한다.

결국 자동으로 이러한 상황을 해결 할 수는 없는 상황이기에

사용자의 폰, 찍은 각도에 따라 업로드시 문제가 발생할 수 있다.

1. 라이브러리 사용

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

https://github.com/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  
   
}

저작자표시 비영리 (새창열림)

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

글 보관함

exhibitlove

티스토리 뷰