이미지가 회전되는 버그 수정

에러 내용

• 모바일 크롬 브라우저에서 이미지 업로드 시 이미지가 회전되어 업로드 된다.

원인 및 해결 방법

• 가짜 뉴스 생성기(링크)를 만들었다. 만들고 보니, 모바일에서 이미지를 생성하면 회전되어 출력되었다.
• 사진 관련 전문가는 아니라서 깊게는 모르겠지만, 이미지가 회전되는 이유를 요약하자면 이렇다.
• Exif (EXchangable Image File format)은 디지털 카메라에서 이용되는 이미지 파일 포맷인데, 이 데이터에는 사진에 대한 정보를 포함하는 메타데이터가 존재한다.
• 그 중 회전 정보를 담고 있는 orientation라는 필드가 있다.
• 기기에서 보는 이미지는 이 필드를 반영하여 사람이 보기 좋게 보여지는데, 브라우저를 통해 업로드 할 때는 회전에 대한 적용없이 표시된다.

 

• 그래서 수정할 수 있는 방법은 2가지이다.
• 1. 이미지를 업로드할 때 사용자가 이미지의 회전 정보를 파악하여 적절하게 회전하거나
• 2. 서버에서 이미지 파일의 정보를 읽어와서 적절하게 회전하거나 (혹은 자바스크립트로 프론트에서 작업)

 

• 2번 방법으로 수정하는 코드는 다음과 같다.
• views.py

 
background_image = form.cleaned_data['background_image']

try:
    image = Image.open(background_image.file)
    for orientation in ExifTags.TAGS.keys():
    	if ExifTags.TAGS[orientation] == 'Orientation':
            break
    exif = dict(image._getexif().items())

    if exif[orientation] == 3:
        image = image.rotate(180, expand=True)
    elif exif[orientation] == 6:
        image = image.rotate(270, expand=True)
    elif exif[orientation] == 8:
        image = image.rotate(90, expand=True)
except (AttributeError, KeyError, IndexError):
	pass

• orientation 속성을 확인하여 이미지를 회전한다. (rotate는 반시계 방향으로 회전함)
• if, elif 문의 숫자는 링크에서 확인할 수 있다.