Glacier's Daily Log

Android) ImageView 사진이 자동으로 회전될 때 해결법 - Glide 라이브러리 사용하기 본문

Coding/Android

Android) ImageView 사진이 자동으로 회전될 때 해결법 - Glide 라이브러리 사용하기

h__glacier_ 2020. 9. 20. 08:50
반응형

안드로이드 ImageView 사진이 자동으로 회전될 때 해결법

Exif 메타정보 이용하기 보단 Glide 이미지 라이브러리 사용해보자


현재 개발중인 안드로이드 어플리케이션에 특정 기능을 구현하려 하던중 막히는 부분이 발생했다.

버튼을 누르면 파일 선택기에 진입해 사진을 고른 후, ImageView에 뿌려주는 기능을 구현하고 싶었다.

실제로 이 기능은 어렵지 않게 구현할 수 있고
최근 업데이트 했던 "의무경찰 성적표" 어플에도

추가한 기능이였다.

 

의무경찰 성적표 - 의경 전역일 계산기 앱, 내 군생활은 몇등급일까? - Google Play 앱

현재 방범순찰대 복무중인 의경이 직접 개발하여 실제 필요한 정보만 모았습니다. 내 군생활은 몇등급인지, 지방청 인력풀 지원 여부까지 한눈에 확인하세요 :) 깔끔한 디자인으로 용량을 최소�

play.google.com

Google Play "의무경찰 성적표" Ver 2.0

하지만 현재 개발하는 어플을 테스트 하던 중, 버그를 발견하였다.


갤러리에서 불러온 사진이 Imageview에 업로드 됐을 때
무작위로 (대체로 삼성 스마트폰 에서 찍은 사진) 회전이 된다.
회전이 되는 기준이 명확하지 않지만, 내 폰 (삼성 갤럭시) 으로 직접 찍은 사진이 대체로 회전되는 경향을 보였다.

 

좌 (원본) 우 (버그로 인해 냥이사진이 회전되어 있는 모습)

대충 자이로센서를 이용한 Rotate값이 사진정보에 남아있어 그렇지 않을까 예상하고
구글링을 해보았다.

단순히 "Android Imageview rotate" 로만 검색해도
나와 같은 상황인 사례가 많이 보였다.

"How to fix the camera Intent rotated Image in Android"

와 같은 질문이 많이 보인다.

 

대체적으로 삼성이나 소니 같은 특정 제조사 디바이스로 찍은 사진들이
Exif 메타데이터에 회전값이 타 기기와 다르게 저장돼서
발생하는 현상인 것 같다.

이를 해결하기 위해서 제시한 많은 방법들이 있었다.
Stackoverflow, 국내 다수 커뮤니티 에서 대부분
Java 코드 단에서 갤러리에서 사진을 선택할 때,
Exif 메타데이터를 불러와 Rotate값을 읽은 뒤
회전함수를 만들어 직접 사진을 돌려주는
생각보다 엄청 복잡한 방식을 사용하고 있었다.

출처 : Stackoverflow "Android geeting an image from gallery comes rotated"

ExifInterface 를 사용하는 Java코드 인데, 보기만 해도 머리가 아프고 복잡하다.

그리고 이 소스들을 적용해 보아도
조금 오래된 소스들이라 그런지 제대로 작동을 하지 않는게 대다수였고, 메모리 부족으로 어플이 강제종료 되기도 하였다.

결국 이 문제로 약 1시간 반을 씨름하였다.
아무리 생각해도, 간단하게 이문제를 해결할 방법이 마련되어 있을 것 같아서 계속 구글링하고 연구해보았다.

노력 끝에 어이없게도 너무 쉬운 방법을 찾았다.


예전에 사진 관련 기능을 구현할 때,
많은 사람들이 안드로이드 이미지 라이브러리를 사용하는게 좋다고 하는 것을
이해를 못하고 무시했는데,
그게 반짝 떠올랐다.

바로 대표적인 Picasso Glide를 적용해 보았다.

아쉽게도 Picasso는 자동회전을 지원하지 않았다. (2020 9월기준)

그래서 Glide를 적용해 보았는데 놀랍게도 문제가 바로 해결되었다.

그럼 Glide를 적용하는 방법을 알아보자.


1) Android Studio 앱단위 Gradle을 변경해야한다.

dependencies {} 사이에

implementation 'com.github.bumptech.glide:glide:3.7.0'

를 넣어주자. glide 라이브러리를 implement 하는 과정이다.

 

2) Uri나 링크를 이용해 불러오고자 하는 이미지를 ImageView에 업로드 시킨다.

갤러리에서 선택한 사진의 Uri를 이용해 ImageView에 업로딩 시키는 소스

Glide.with(this).load(Uri).into(이미지뷰);

"Uri" 부분에 필요한 Uri 변수를 넣고 "이미지뷰" 부분에 이미지뷰 id값을 넣으면 적용된다.

 

3) 끝이다.

이렇게 매우 간단하게 Glide를 이용해 원하는 사진을 이미지뷰에 올릴 수 있게 되었다.

정상적으로 사진원본 방향대로 업로드 된 모습.


이렇게 매우 쉽게 버그를 해결 할 수 있었다.

한시간동안 나와의 싸움을 했던 것은 힘들었지만

결국 쉬운 방법으로 버그를 해결해서 만족스러웠다.

 

혹시나 추가 궁금한 점이 있으시면 댓글로 남겨주세요.

반응형
Comments