img 태그가 잘못된 방향을 표시합니다

142

이 링크에 이미지가 있습니다 : http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

보시다시피, 이것은 올바른 방향의 정상적인 이미지입니다. 그러나이 링크를 이미지 태그의 src 속성으로 설정하면 이미지가 거꾸로됩니다. http://jsfiddle.net/7j5xJ/

<img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/>
스 니펫 확장

무슨 일이 일어나고 있는지 아십니까?

html  css  image 
— 게으른 로그
소스
파이어 폭스에서는 두 경우 모두 거꾸로되어 있습니다. EXIF 정보를 기반으로 Chrome이 자동으로 회전 할만 큼 똑똑하다고 생각합니다.
— dfsq
흠, 정말? 내 파이어 폭스에서 원본은 여전히 ​​정상이며 img의 이미지는 거꾸로 있습니다.
— 게으른 로그
1
이미지 자체가 거꾸로 cloudfront되어 페이지에서 회전 할 수 있다고 생각합니다 . CSS jsfiddle.net/7j5xJ/1을
— Kevin Lynch
2
regex.info/... 이있다 Orientation: Rotate 180EXIF에.
— dfsq
1
방향을 지정하는 사진 메타 데이터의 문제입니다. 이미지 태그가 이것을 설명하지 않는 이유를 모르겠습니다. 좋은 답변을 아직 찾지 못했습니다 ...
— Chet

답변:

91

해결책의 일부를 찾았습니다. 이미지에는 이제 사진의 방향을 지정하는 메타 데이터가 있습니다. 에 대한 새로운 CSS 사양이image-orientation 있습니다.

CSS에 이것을 추가하십시오.

img {
    image-orientation: from-image;
}

2016 년 1 월 25 일의 사양에 따르면 Firefox 및 iOS Safari (접두사 뒤에 있음)가이를 지원하는 유일한 브라우저입니다. Safari 및 Chrome에 여전히 문제가 있습니다. 그러나 모바일 Safari는 기본적으로 CSS 태그가없는 방향을 지원하는 것 같습니다.

브라우저가 지원을 시작할지 기다려야한다고 가정 image-orientation합니다.

— t
소스
3
내가 테스트 한 이상한 브라우저 (최근 화신의 Mac에서 Safari, Chrome 및 Firefox)는 이미지가 HTML없이 직접 표시 될 때 플래그를 올바르게 처리합니다.
— anw
2
실험적이므로주의하십시오. 대부분의 브라우저에는 적합하지 않은 브라우저 호환성을 확인하십시오. 바라건대 그들은 어떤 시점에서 이것을 정리할 것입니다.
— lostintranslation
35
이것은 오늘날 대부분의 브라우저와 호환되지 않습니다. caniuse.com/#search=image-orientation
— Gabriel C
2
세계에서 왜 이미지에 방향 메타 데이터가 있는가? 실제로 그림을 회전하려면 픽셀 주위를 이동하고 너비를 높이로 바꾸지 않겠습니까?
— Jack Giffin
15
이것은 어떻게 많은 공감대를 얻었습니까? 그것은 매우 지원되지 않으며 firefox caniuse.com/#search=image-orientation
— 친구
26

이미지가 실제로 거꾸로되어 있습니다. 그러나 메타 속성 "Orientation"은 시청자에게 180도 회전해야 함을 알려줍니다. 일부 장치 / 뷰어는이 규칙을 따르지 않습니다.

Chrome에서 열기 : 올바른 방법 FF로 열기 : 올바른 방법 IE에서 열기 : 거꾸로

그림판에서 열기 : 거꾸로 Photoshop에서 열기 : 올바른 방법. 기타

— i-CONICA
소스
1
사용자가 이미지를 업로드하기 전에이를 방지 할 수있는 방법을 알고 있습니까? 이 이미지는 사용자가 직접 업로드하므로이를 극복 할 방법을 찾아야합니다
— The Lazy Log
이미지를 호스팅하는 서비스의 경우 어쨌든 이미지를 크기 조정, 파일 크기 및 보안상의 이유로 다시 인코딩하는 것이 가장 좋습니다. 따라서 다시 인코딩 된 버전에서 이미지를 수정할 수 있습니다.
— i-CONICA
내가 참조. 이것을 처리하는 더 좋은 방법을 찾아야합니다. 이미지를 S3에 업로드 한 후 이미지를 처리해야 할 수도 있습니다
— The Lazy Log
PHP에서 GD 라이브러리를 사용할 수 있습니다.
— i-CONICA
5
가장 간단한 방법은 방향 메타 데이터를 제거하고 이미지를 뒤집는 것입니다. Imagemagick은이를 수행하는 자동 변환 기능을 제공합니다.
— saurabheights
19

Linux에 액세스 할 수있는 경우 터미널을 열고 이미지가 포함 된 디렉토리로 cd 한 다음 실행하십시오.

mogrify -auto-orient *

모든 이미지의 방향 문제를 영구적으로 해결해야합니다.

— 폴 크리스 존스
소스
4
이것은 나를 위해 일했다, 당신은 brew install imagemagick얻을 경우 맥 에서 실행해야 할 수도 있습니다command not found: mogrify
— 카일
다음 이미지까지 .. 단점이 있습니까?
— 해리 보쉬
12

여기에 내 답변을 추가하는 것을 잊었습니다. Ruby on Rails를 사용했기 때문에 PHP 또는 다른 프레임 워크의 프로젝트에는 적용되지 않을 수 있습니다. 제 경우에는 이미지 업로드에 Carrierwave gem을 사용하고있었습니다. 내 솔루션은 파일을 저장하기 전에 EXIF ​​문제를 해결하기 위해 업 로더 클래스에 다음 코드를 추가하는 것이 었습니다.

process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end
— 게으른 로그
소스
1
좋은 대답이지만 기존 이미지 파일 에서이 메소드를 어떻게 호출 할 수 있습니까?
— Matrix
버전을 다시 만들어야합니다. 나는 이런 식으로 작동한다고 생각합니다 : stackoverflow.com/a/9065832/461640
— The Lazy Log
11

png로 저장하면 문제가 해결되었습니다.

— 세이 모스 타파 무사 비 카 하키
소스
1
이 솔루션은 사진이 아닌 이미지에만 유용합니다. "JPG 형식은 손실 압축 파일 형식입니다. 이는 BMP보다 작은 크기로 사진을 저장하는 데 유용합니다. JPG는 웹에서 일반적으로 사용되는 선택입니다. 더 작은 파일 크기로 라인 도면, 텍스트 및 아이콘 그래픽을 저장하려면 GIF 또는 PNG가 무손실이므로 더 나은 선택입니다. " - labnol.org/software/tutorials/...
— Kc를 깁슨
굉장하고, 해결 된 감사
— T. Shashwat
2
PNG로 저장 한 다음 다시 JPG로 돌아가 파일 크기를 작게 유지하고 방향을 올바르게 저장했습니다.
— MDave
10

이 답변은 Exif-JS를 사용하여 bsap의 답변을 기반으로 하지만 jQuery에 의존하지 않으며 이전 브라우저와도 상당히 호환됩니다. 다음은 예제 html 및 js 파일입니다.

rotate.html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
  <html>
  <head>
    <style>
      .rotate90 {
       -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
       -o-transform: rotate(90deg);
       -ms-transform: rotate(90deg);
       transform: rotate(90deg);
      }
      .rotate180 {
       -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
       -o-transform: rotate(180deg);
       -ms-transform: rotate(180deg);
       transform: rotate(180deg);
      }
      .rotate270 {
       -webkit-transform: rotate(270deg);
       -moz-transform: rotate(270deg);
       -o-transform: rotate(270deg);
       -ms-transform: rotate(270deg);
       transform: rotate(270deg);
      }
    </style>
  </head>
  <body>
    <img src="pic/pic03.jpg" width="200" alt="Cat 1" id="campic" class="camview">
    <script type="text/javascript" src="exif.js"></script>
    <script type="text/javascript" src="rotate.js"></script>
  </body>
  </html>

rotate.js :

window.onload=getExif;
var newimg = document.getElementById('campic');
function getExif() {
    EXIF.getData(newimg, function() {
            var orientation = EXIF.getTag(this, "Orientation");
            if(orientation == 6) {
                newimg.className = "camview rotate90";
            } else if(orientation == 8) {
                newimg.className = "camview rotate270";
            } else if(orientation == 3) {
                newimg.className = "camview rotate180";
            }
        });
};
— VMQ
소스
exif-js는 이제 너무 오래되고 유지 관리되지 않아 엄격 모드가 활성화 된 곳과 같은 일부 환경에서는 실패합니다. 우리는 이것을위한 해결책이 정말로 필요합니다. 내 응용 프로그램이 나에게 쓰레기를 좌절시키고 있으며 내가 찾은 모든 해결 방법에는 충분한 단점이 있습니다.
— 감리교
9

Exif-JS를 사용 하여 이미지의 "방향"속성을 확인할 수 있습니다 . 그런 다음 필요에 따라 CSS 변환을 적용하십시오.

EXIF.getData(imageElement, function() {
                var orientation = EXIF.getTag(this, "Orientation");

                if(orientation == 6)
                    $(imageElement).css('transform', 'rotate(90deg)')
});
— s
소스
7

이 문제는 나를 미치게했다. 서버 측에서 PHP를 사용하고 있었기 때문에 @The Lazy Log (ruby) & @deweydb (python) 솔루션을 사용할 수 없었습니다. 그러나 그것은 올바른 방향으로 나를 가리 켰습니다. Imagick의 getImageOrientation ()을 사용하여 백업 파일에 고정했습니다.

<?php 
// Note: $image is an Imagick object, not a filename! See example use below. 
function autoRotateImage($image) { 
    $orientation = $image->getImageOrientation(); 

    switch($orientation) { 
        case imagick::ORIENTATION_BOTTOMRIGHT: 
            $image->rotateimage("#000", 180); // rotate 180 degrees 
        break; 

        case imagick::ORIENTATION_RIGHTTOP: 
            $image->rotateimage("#000", 90); // rotate 90 degrees CW 
        break; 

        case imagick::ORIENTATION_LEFTBOTTOM: 
            $image->rotateimage("#000", -90); // rotate 90 degrees CCW 
        break; 
    } 

    // Now that it's auto-rotated, make sure the EXIF data is correct in case the EXIF gets saved with the image! 
    $image->setImageOrientation(imagick::ORIENTATION_TOPLEFT); 
} 
?>

자세한 내용을 보려면 링크가 있습니다. http://php.net/manual/en/imagick.getimageorientation.php

— 사용자
소스
6

삼성 전화가 통합 한 EXIF ​​데이터입니다.

— 트레이스 데코이
소스
1
아, 그래서 이것은 삼성 전화로 찍은 이미지에서만 발생합니까?
— 게으른 로그
4
여러 가지로 발생합니다. 나는 아이폰에서도 그것을 보았다.
— Trace DeCoy
EXIF 메타 데이터는 사진 자체에 대한 정보 (셔터 속도, 렌즈 조리개, ISO 감도, 초점 거리 등), 컨텍스트 데이터 (날짜, 시간, 온도, 습도)를 포함 할 수 있으며 GPS 좌표와 회전 각도를 포함 할 수 있습니다. 최대 90 ° 배수. 오늘날 대부분의 스마트 폰과 카메라는 이러한 메타 데이터를 EXIF ​​블록에 넣습니다. 따라서 브라우저가 올바른 프레임 회전을 자동으로 적용하는 것은 시간 문제입니다.
— ManuelJE
5

CSS image-orientation:from-image;가 더 보편적으로 지원 될 때까지 우리는 파이썬으로 서버 측 솔루션을 수행하고 있습니다. 여기 요점이 있습니다. exif 데이터의 방향을 확인한 다음 그에 따라 이미지를 회전하고 다시 저장하십시오.

추가 라이브러리 클라이언트를로드 할 필요가 없으므로 클라이언트 측 솔루션보다이 솔루션을 선호하며이 작업은 파일 업로드시 한 번만 수행하면됩니다.

if fileType == "image":
    exifToolCommand = "exiftool -j '%s'" % filePath
    exif = json.loads(subprocess.check_output(shlex.split(exifToolCommand), stderr=subprocess.PIPE))
    if 'Orientation' in exif[0]:
        findDegrees, = re.compile("([0-9]+)").search(exif[0]['Orientation']).groups()
        if findDegrees:
            rotateDegrees = int(findDegrees)
            if 'CW' in exif[0]['Orientation'] and 'CCW' not in exif[0]['Orientation']:
                rotateDegrees = rotateDegrees * -1
            # rotate image
            img = Image.open(filePath)
            img2 = img.rotate(rotateDegrees)
            img2.save(filePath)
— 듀이
소스
3

이미지의 원래 방향이 이미지 뷰어에서 보는 것과 다르기 때문에 발생합니다. 이러한 경우 이미지는 이미지 뷰어에서 수직으로 표시되지만 실제로는 수평입니다.

이 문제를 해결하려면 다음을 수행하십시오.

  1. 페인트 (Windows) 또는 ImageMagick (Linux)과 같은 이미지 편집기에서 이미지를 엽니 다.

  2. 이미지를 왼쪽 / 오른쪽으로 회전합니다.

  3. 이미지를 저장하십시오.

문제가 영구적으로 해결됩니다.

— 유브 라즈 파틸
소스
1

문제를 해결하는 가장 쉬운 방법은 sans 코딩이며 Photoshop의 웹 저장 기능 내보내기 기능을 사용하는 것입니다. 대화 상자에서 이미지의 EXIF ​​데이터 전체 또는 대부분을 제거하도록 선택할 수 있습니다. 나는 보통 저작권과 연락처 정보를 유지합니다. 또한 디지털 카메라에서 직접 가져온 이미지는 웹 표시에 맞게 크게 크기 때문에 웹용으로 저장을 통해 이미지를 축소하는 것이 좋습니다. Photoshop에 정통하지 않은 사람들에게는 이미지 크기를 조정하고 불필요한 EXIF ​​데이터를 제거하는 데 필요한 온라인 리소스가 있다는 것은 의심 할 여지가 없습니다.

— AlGator
소스
4
그러나 사용자가 업로드 할 이미지를 선택할 수있는 응용 프로그램을 개발하는 경우이 경우 Photoshop을 사용하는 방법은 무엇입니까? :)
— 게으른 로그
1

브라우저 자동 수정 이미지 방향에 문제가 있다고 생각합니다. 예를 들어 그림을 직접 방문하면 올바른 방향이 표시되지만 일부 종료 HTML 페이지에서는 잘못된 방향이 표시됩니다.

— 카이조
소스
-19

외부 스타일링을 사용하십시오. html 시트에서 클래스 이름을 태그에 지정하십시오. 스타일 시트에서 클래스 이름 앞에 점 연산자를 사용하고 다음 코드를 작성하십시오.

.rotate180 {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 }
— msd
소스
일반화 된 솔루션이 아닙니다. 해당 이미지에서 구체적으로 작동합니다
— th3pirat3
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.