브라우저를 통해 다양한 스마트폰에서 이미지를 올릴 때의 Exif.오리엔테이션에 빠졌어요.
6571 단어 JavaScriptNode.jsexiftech
프로그램 달력 로드 나흘째 기사에는 며칠 전 공개된'패션모델이 되어라'의 콘텐츠 페이지를 제작할 때 안드로이드, iOS 단말기에 올라온 이미지를 담은 엑시프가 실렸다.오리엔테이션 처리 중에 반했을 때의 일을 말씀드리겠습니다!
'패션 모델 돼라'.
'패션모델이 돼라'는 자신의 사진을 올리면 AI가 옷의 색깔 등에서 어떤 코디를 하는지 판단해 당신의 옷에 어울리는 패션지 표지 스타일 이미지를 만들어내는 서비스다.
꼭 해보세요!
일의 발단
이미지 업로드 기능을 만드는 과정에서 아이폰에서 올라온 화면이 확인 전에 표시되면 이미지 크기는 줄어들지만, 실제 반영된 이미지를 확인하는 데
fileReader()
를 사용하면 세로로 찍은 사진이 반드시 가로로 표시되는 현상을 겪게 된다.다른 방향으로 촬영하더라도 이미지 크기가 바뀌면 반드시 이 방향으로 보일 것이다.
조사를 해보면 이미지의 메타데이터(Exif)에'사진의 향(Orientation)'을 나타내는 데이터가 존재하는데, iOS 단말기의 이런 이미지 압축에서는 이를 바탕으로 방향 수정을 한 뒤 Exif의 대부분을 삭제한 것 같다.또한 안드로이드의 일부 터미널에서도 Exif의 오리엔테이션 수정 값에 잘못된 값이 있음을 확인했다.
이번 기사에서 자세한 내용과'패션 모델이 돼라'에서 어떻게 대처했는지 간략하게 적어보겠습니다.
Exif 정보
이 표준은 디지털 정적 카메라와 디지털 카메라가 촬영한 이미지 파일이나 소리 파일을 처리하는 시스템에서 이미지, 소리, 라벨의 형식을 규정한다.
이쪽 방법으로도 읽을 수 있는데, 엑시프는 영상·이미지·사운드를 다루는 파일의 메타데이터로, 그 중에서도 촬영기자재·장소의 정보 촬영 설정(정지화로 말하자면 ISO 민감도와 F값, 이미지의 방향 등) 등으로 다양한 정보가 저장돼 있다.
특히 이미지의 방향(Orientation)과 관련해서는 다음 값으로 이미지의 방향이 보도에서 빌린 것이다을 지정합니다.
%orientation = (
1 => 'Horizontal (normal)',
2 => 'Mirror horizontal',
3 => 'Rotate 180',
4 => 'Mirror vertical',
5 => 'Mirror horizontal and rotate 270 CW',
6 => 'Rotate 90 CW',
7 => 'Mirror horizontal and rotate 90 CW',
8 => 'Rotate 270 CW',
);
Exif.바이너리 데이터에서 오리엔테이션을 확인하려면 Hex Fiend 등 바이너리 편집기를 사용하면 편리하다.Exif의 이미지 존재 여부는 첫 번째 5-8자 코드가
FFE1
인지 FFE0
인지에 따라 판별할 수 있다.※ 이 기사를 참고하도록 허락해 주십시오. 무슨 일이 일어났는지 & 그 처리
① iOS의 이미지 압축에서 Exif 제거
까닭
iOS 터미널의 카메라에는 기본 방향이 있습니다.
수직상태에서 왼쪽으로 90° 기울어지면 바로 이 상태↓
이 상태에서부터 얼마나 회전했는지 Exif로 저장하면 사진 앱과 다른 다양한 곳에서 이것을 읽을 수 있고, 마지막으로'촬영할 때의 외관'으로 표시할 수 있다.
본고의 첫 번째 예는 iOS 단말기의 주요 브라우저에 이미지를 올릴 때 이미지를 압축했기 때문에 이 Exif가 삭제되었다는 것이다.
실제로 아까의 예에서 가로로 바뀐 미리보기 이미지를 Hex Fiend에 저장한 결과 5-8글자
FFE0
에 Exif가 존재하지 않았다.처리하다.
Exif가 사라지면 촬영자의 의도 각도를 읽을 수 없습니다.따라서 업로드 시 미리 보기 화면에 이미지를 회전시킬 수 있는 기능을 설정하여 이미지를 정확한 각도로 복원하고 회전수와 이미지 데이터를 요청에 포함시켜 appi에서 원래 이미지의 방향으로 복원할 수 있다.
② 안드로이드의 일부 터미널에서 촬영한 이미지는 Exif입니다.Orientation은 0입니다.
까닭
안드로이드의 일부 터미널은 어떤 각도에서 Exif를 촬영하든지Orientation이 0이 됩니다.
웹에는 삼성갤럭시노트4의 보고서가 다수 올라왔는데 이번 사례에서도 갤럭시 터미널에서 이런 현상이 발생했다.
처리하다.
Exif.오리엔테이션 = 0은 처음 접하는 Exif의 규격에 없는 값이기 때문에 방법에 따라 처리 방법이 적절할 수 있다.
그러나 정확한 방향이 그대로 저장되기 때문에 그림의 방향을 바꿀 필요가 없다.규격상'기본 방향'
Orientation=1
으로 여겨지는 것과 동일하게 처리할 수 있기 때문에 업로드된 이미지의 Exif.Orientation을 1로 변경하면 문제가 없습니다.끝말
실기 검증에서 고려사항이 많이 늘어났는데 한동안 어떻게 될지 생각했는데 잘 안정돼서 마음이 놓인다.특히 iOS가 이미지를 압축한 이미지에 대한 기술적 보도가 거의 없어 조사에 상당한 시간이 걸렸다
같은 일로 괴로워하는 사람들을 도울 수 있다면 좋겠네요.감사합니다!
참고 자료
Reference
이 문제에 관하여(브라우저를 통해 다양한 스마트폰에서 이미지를 올릴 때의 Exif.오리엔테이션에 빠졌어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/helicoir/articles/47120ebc9f3db4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)