사용자가 사진을 선택할 때 이미지가 임의로 회전합니다.

Question

작업중인 모바일 웹 앱용 사진 선택기를 만들고 있는데 이미지가 "임의로 회전"된 것처럼 보입니다. 예를 들어 휴대 전화 카메라로 사진을 찍고 휴대 전화 방향이 가로 방향 인 경우 이미지가 어떤 이유로 90도에서 렌더링됩니다. 그러나 사진을 찍고 전화 방향을 세로로 변경하면 이미지가 올바르게 렌더링됩니다.
기존 이미지를 선택하면 일부 이미지는 올바르게 렌더링되고 일부 이미지는 올바르게 렌더링되지 않습니다.

이미 이미지 크기에서 패턴을 찾으려고했으나 (수평 또는 수직 이미지에서이 문제가 발생했다면), 디바이스 방향에 관계없이 모두 동일한 크기를 갖고 있기 때문에 문제가되지는 않습니다. .

이 문제를 해결할 정상적인 방법이 있는지 궁금합니다. 나는 이미지를 전혀 회전시키지 않기를 바랄뿐입니다.

Here's a code snippet to test. iOS 6에서만 테스트하고 있습니다.

Answer 1

이 문제가 배경 이미지로 컨테이너에 이미지를 설정하는 것이 었습니다 밝혀 새로운 CSS3 속성 background-size: cover을 사용하여 전체 보이는 영역을 비례 적으로 채 웁니다. 어떤 이유로 모바일 브라우저는 때로는 적절한 2D 변환 방법을 모르고 배경으로 설정된 이미지를 회전시킵니다.

해결 방법은 이제 <img> 태그를 추가하는 것이 었습니다. 이제 데스크톱과 모바일 브라우저에서 잘 작동합니다.

Ps .: 모바일 Chrome 및 Safari, iOS6 및 iOS7에서만 테스트되었습니다.

Answer 2

iPhone 이미지는 방향에 상관없이 동일한 방식으로 저장됩니다. 오른쪽의 집 버튼으로 사진을 찍으면 사진이 항상 정확합니다. EXIF 데이터를 읽는 방법을 결정하려면 EXIF ​​데이터를 읽어야합니다. 여기

는 EXIF ​​데이터를 읽고 관련된 질문 : Accessing JPEG EXIF rotation data in JavaScript on the client side

이이 질문에 유사합니다 Camera image changes orientation