<img/> 로 붙인 이미지가 브라우저에 의해 90도 회전하여 표시되나요?

6067 단어 RailsexifHTMLImageMagick브라우저

현상



iPhone등의 휴대전화로 찍은 사진을 <img> 태그로 web페이지상에 붙여 넣는 것을 생각합니다.

다음 이미지를 확인에 사용합니다.
  • 굴 튀김 정식
  • 맥주

    • 이 이미지를 그대로 img 태그로 웹 페이지에 붙여 넣으면 ...
  • Mac Chrome
  • Mac Safari
  • iOS (Simulator) Safari

    • 맥주는 Mac Chrome과 Mac Safari에서 90도 왼쪽으로 회전합니다.
    왜 IOS Safari에서 올바른 방향으로 표시됩니다.

    원인



    iPhone 등의 스마트 폰으로 찍은 사진에서는 카메라를 어느 방향으로 잡아도 저장할 때 이미지 회전이 이루어지지 않고 대신 EXIF 정보에 회전 정보(Orientation)가 저장됩니다.

    이번에 사용한 사진 중, 굴 튀김 정식은 90°의 방향으로, 맥주는 0°의 방향으로 촬영한 것이었습니다.


    이미지의 EXIF ​​정보를 들여다 보면,
  • 굴 튀김 정식 (방향 : 1 (표준))
  • 맥주 (방향 : 6 (반 시계 방향으로 90 ° 회전))

    • 그래서, 아무래도 내 iPhone (5s, iOS 10.0.2)에서는 90 ° 회전시의 이미지를 저장하고 방향을 EXIF로 지정하는 것 같습니다.

    브라우저가 EXIF를 참조하여 이미지의 방향을 보정하지 않는 것이있는 것 같습니다.
    2013년경의 약간 낡은 정보에 따르면, iOS의 브라우저(Safari, Chrome)만으로, EXIF정보에 의한 방향 보정이 걸리는 것 같습니다.
    h tp // w w. 히데이와. 코 m/bぉg/아 rゔぇs/432

    해결책



    2 패턴의 해결 방법이 있습니다.
  • EXIF ​​정보를 서버에서 읽고 EXIF ​​정보를 바탕으로 이미지를 미리 회전시켜 저장합니다.
  • EXIF ​​정보를 Javascript로 읽고 브라우저에서 회전시킵니다.



    • 이번은 1번째를 채용해, 드디어 EXIF ​​정보를 지우도록(듯이) 실장해 보겠습니다.

    (EXIF를 지우고 있는 것은, EXIF에 포함되는 GPS 정보로, 언제 어디에서 맥주를 ​​마셨는지가 들키는 것을 막기 위해서입니다.)

    htps : // 기주 b. 코 m / b 에이 mp / 그럼 ぁ Sc 리 pt ぉ 아 d

    (우연히 이때는 Rails를 사용하고 있었으므로, 이하에서는 Ruby의 이야기를 합니다.
    다른 언어에서도 똑같이 할 수 있어야합니다)

    ImageMagick의 Ruby 라이브러리 을 사용하면 한 번에 회전 할 수있는 것 같습니다.
    m_image.auto_orient! #EXIF情報をもとに、m_imageを回転させたものを返す

m_image.strip! #EXIF情報を消す

    전체 코드:
    image_original = File.open('/***/beer.jpg').read
rmagick_image = Magick::Image.from_blob(image_original).first
rmagick_image.auto_orient!
rmagick_image.strip!
image_rotated = rmagick_image.to_blob

    이제 어떤 브라우저에서도 올바른 방향으로 표시되는 이미지를 만들었습니다.
    그리고는, 특히 신경쓰지 않고 img 태그로 화상을 붙이면 OK입니다.

    요약



    EXIF 정보를 바탕으로 이미지를 회전, EXIF를 삭제하여,
    브라우저 의존없이 이미지를 올바른 방향으로 표시 할 수있었습니다.

    브라우저 의존에 대해서, iOS의 Safari, Chrome에서 EXIF를 바탕으로 화상이 회전되는 것은 알고 있습니다만, 그 이외의 브라우저 의존은, 검증할 수 있는 환경이 없어 확인하고 있지 않습니다.
    뭔가 있으면 코멘트를 받을 수 있으면 다행입니다.

    참고



    CentOS에서 RMagick 설치 방법
    Rmagick

    부록



    이미지 표시를 확인하는 데 사용한 html 소스 (URL이 변경되었습니다)
    <html>
  <body>
    <img src="https://storage.googleapis.com/hoge/items/kakifurai.JPG" style="max-width: 100%;">
    <img src="https://storage.googleapis.com/hoge/items/beer.JPG" style="max-width: 100%;">
  </body>
</html>
    ImageMagick과 GNU Parallel을 사용하여 다른 크기의 더미 이미지 100장을 1분에 준비
    ImageMagick 지정된 영역의 RGB 값을 열거합니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage