web-dev-qa-db-ja.com

imgタグに間違った方向が表示される

このリンクに画像があります： 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"/>

何が起こっているのか分かりますか？

htmlcssimage
99
The Lazy Log

ここに自分の答えを追加するのを忘れました。私はRubyを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
12
The Lazy Log

ソリューションの一部を見つけました。画像には、写真の向きを指定するメタデータが含まれるようになりました。新しい image-orientationのCSS仕様 があります。

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

img {
    image-orientation: from-image;
}

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

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

74
Chet

あなたの画像は実際には逆さまです。しかし、それは視聴者にそれが180度回転されるべきであることを伝えるメタ属性「オリエンテーション」を持っています。一部のデバイス/ビューアーはこの規則に従っていません。

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

ペイントで開きます：逆さまPhotoshopで開きます：正しい方向に。等.

21
i-CONICA

この回答は 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";
            }
        });
};
6
VMQ

Exif-JS を使用して、画像の「方向」プロパティを確認できます。次に、必要に応じてcss変換を適用します。

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

                if(orientation == 6)
                    $(imageElement).css('transform', 'rotate(90deg)')
});
6
bsap

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

6
Trace DeCoy

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

5
Seyed Mostafa Mousavi Kahaki

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)
4
deweydb

この問題も私を夢中にさせました。サーバー側で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

4
user4504661

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

mogrify -auto-orient *

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

2
Paul Jones

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

1
AlGator

ブラウザの自動修正画像の向きにはいくつかの問題があると思います。たとえば、写真に直接アクセスすると、正しい向きを表示しますが、一部のexit htmlページで間違った向きを表示します。

0
Kai Zou

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

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

  1. Paint（Windowsの場合）やImageMagick（Linuxの場合）などの画像エディターで画像を開きます。

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

  3. 画像を保存します。

これにより、問題が完全に解決されます。

0
Yuvraj Patil