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 
— レイジーログ
ソース
Firefoxでは、どちらの場合も上下が逆になります。Chromeは、EXIF情報に基づいて自動的に回転するほどスマートだと思います。
— dfsq 14
うーん、本当ですか？私のFirefoxでは、オリジナルはまだ正常で、画像の画像が上下逆になっています。
— レイジーログ14
1
画像自体が上下逆cloudfrontで、ページ内で回転している可能性があります。CSS jsfiddle.net/7j5xJ/1
— Kevin Lynch
2
regex.info/…EXIFにありOrientation: Rotate 180ます。
— dfsq 14
1
向きを指定する写真のメタデータの問題です。イメージタグがこれを考慮しない理由はわかりません。良い答えはまだ見つかりません...
— Chet

回答:

91

解決策の一部を見つけました。画像には、写真の向きを指定するメタデータが含まれています。の新しいCSS仕様がありimage-orientationます。

これをCSSに追加するだけです。

img {
    image-orientation: from-image;
}

2016年1月25日の仕様によると、FirefoxとiOS Safari（プレフィックスの後ろ）のみがこれをサポートするブラウザーです。SafariとChromeでまだ問題が発生します。ただし、モバイルSafariは、CSSタグなしで向きをネイティブにサポートしているようです。

ブラウザーがサポートを開始するかどうかを確認する必要があると思いますimage-orientation。

— チェット
ソース
3
不思議なことに、私がテストしたブラウザー（最近のバージョンではMac上のSafari、Chrome、Firefox）は、HTMLなしで画像が直接表示されたときに、フラグを適切に処理します。
— 2015年
2
実験的なので注意してください。ほとんどのブラウザではうまく見えないブラウザの互換性を確認してください。うまくいけば、彼らはいつかこれを整理するでしょう。
— lostintranslation 2016年
35
これは今日のほとんどのブラウザーと互換性がありませんcaniuse.com/#search=image-orientation
— Gabriel C
2
なぜ画像に方向メタデータさえあるのですか？本当に画像を回転させたい場合は、ピクセルをシフトして幅と高さを入れ替えませんか？
— ジャックギフィン2017年
15
これはどのようにして多くの賛成票を得ていますか？これは非常にサポートされておらず、firefox以外では機能しませんcaniuse.com/#search=image-orientation
— 友人
26

あなたの画像は実際には上下逆です。ただし、メタ属性「Orientation」があり、180度回転する必要があることをビューアに伝えます。一部のデバイス/ビューアはこのルールに従っていません。

Chromeで開く：正しい方法で開くFFで開く：正しい方法で開くIEで開く：逆さま

ペイントで開く：逆さまPhotoshopで開く：正反対。等

— i-CONICA
ソース
1
ユーザーが画像をアップロードする前に、これらをどのように防ぐことができるか考えていますか？この画像はユーザーが直接アップロードするので、これを克服する方法を見つける必要があります
— The Lazy Log
画像をホストするサービスの場合は、寸法、ファイルサイズ、セキュリティ上の理由から、とにかく画像を再エンコードすることをお勧めします。これにより、再エンコードされたバージョンで画像が修正される場合があります。
— i-CONICA 2014
そうですか。これを処理するより良い方法を見つける必要があります。多分私はそれがS3にアップロードされた後に画像を処理する必要があります
— レイジーログ
PHPでGDライブラリを使用できます。
— i-CONICA 2014
5
より簡単な方法は、向きのメタデータを削除して画像を反転させることです。Imagemagickは、これを行う変換-autoorient関数を提供します。
— saurabheights 2016年
19

Linuxにアクセスできる場合は、ターミナルを開き、イメージを含むディレクトリにcdしてから実行します。

mogrify -auto-orient *

これにより、すべての画像の向きの問題が完全に修正されます。

— ポールクリスジョーンズ
ソース
4
これは私のために働きました、brew install imagemagickもしあなたが得るならあなたはmacで走る必要があるかもしれません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
良い答えですが、既存の画像ファイルでこのメソッドを呼び出すにはどうすればよいですか？
— マトリックス
バージョンを再作成する必要があります。私はこのようなものがうまくいくと思います：stackoverflow.com/a/9065832/461640
— Lazy Log
11

PNGとして保存すると問題が解決しました。

— セイドモスタファムサビカハキ
ソース
1
このソリューションは、写真以外の画像にのみ役立ちます。「JPG形式は非可逆圧縮ファイル形式です。これにより、BMPよりも小さいサイズで写真を保存するのに役立ちます。JPGはWebで一般的に使用される選択肢です。圧縮。線画、テキスト、アイコングラフィックを小さいファイルサイズで保存するには、損失のないGIFまたはPNGが適しています。- labnol.org/software/tutorials/...
— Kcのギブソン
すばらしい解決済みの感謝
— T.シャシュワット
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)')
});
— bsap
ソース
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

— ユーザー4504661
ソース
6

Samsungの電話に組み込まれているのはEXIFデータです。

— トレースデコイ
ソース
1
ああ、これはサムスンの携帯電話で撮影した画像でのみ発生しますか？
— レイジーログ14
4
いくつかで起こります。iPhoneでも見たことがあります。
— 2014
EXIFメタデータには、写真自体に関する情報（シャッター速度、レンズ口径、ISO感度、焦点距離など）、コンテキストデータ（日付、時刻、温度、湿度）が含まれ、GPS座標と丸められた回転角度が含まれる場合があります。最大90°倍。今日のスマートフォンやカメラの大部分は、これらのメタデータをEXIFブロックに入れているため、ブラウザが正しいフレームローテーションを自動的に適用するのは時間の問題です。
— ManuelJE
5

CSS：image-orientation:from-image;がより一般的にサポートされるまで、Pythonでサーバー側のソリューションを実行しています。ここにその要点があります。exifデータの向きを確認してから、それに応じて画像を回転させ、再度保存します。

クライアント側で追加のライブラリをロードする必要がないため、クライアント側のソリューションよりもこのソリューションを優先します。この操作は、ファイルのアップロード時に1回だけ実行する必要があります。

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)
— deweydb
ソース
3

これは、画像の元の向きが画像ビューアに表示されるものと異なるために発生します。このような場合、画像ビューアでは画像は垂直に表示されますが、実際は水平です。

これを解決するには、次の手順を実行します。

  1. ペイント（Windowsの場合）またはImageMagick（Linuxの場合）などの画像エディターで画像を開きます。

  2. 画像を左/右に回転します。

  3. 画像を保存します。

これで問題は完全に解決されます。

— ユブラージパティル
ソース
1

この問題を修正する簡単な方法は、コーディングではなく、PhotoshopのSave for Webエクスポート機能を使用することです。ダイアログボックスでは、画像のEXIFデータのすべてまたはほとんどを削除することを選択できます。私は通常、著作権と連絡先情報を保持します。また、デジタルカメラから直接送られてくる画像はWeb表示用に非常にサイズが大きいため、とにかくSave for the Webを使用して画像を縮小することをお勧めします。Photoshopに精通していない人のために、画像のサイズを変更して不要なEXIFデータを取り除くためのオンラインリソースがあることは間違いありません。

— アルゲーター
ソース
4
しかし、ユーザーがアップロードする画像を選択できるアプリケーションを開発している場合、その場合のPhotoshopの使用方法は？:)
— Lazy Log
1

ブラウザの自動修正画像の向きにいくつかの問題があると思います。たとえば、画像に直接アクセスすると、正しい向きが表示されますが、一部のexit 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.