tag img menampilkan orientasi yang salah

142

Saya punya gambar di tautan ini: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

Seperti yang Anda lihat, ini adalah gambar normal dengan orientasi yang benar. Namun, ketika saya mengatur tautan ini ke atribut src dari tag gambar saya, gambar menjadi terbalik. http://jsfiddle.net/7j5xJ/

<img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/>
Luaskan cuplikan

Apakah Anda tahu apa yang sedang terjadi?

html css image Log Malas
sumber
Dalam firefox terbalik dalam kedua kasus. Saya pikir Chrome cukup pintar untuk memutarnya secara otomatis berdasarkan informasi EXIF.
dfsq
Hmm benarkah? Di firefox saya, aslinya masih normal dan gambar di img terbalik.
The Lazy Log
1
Saya pikir gambar itu sendiri terbalik dan cloudfrontbisa diputar di halaman. Anda dapat memaksakan rotasi melalui CSS jsfiddle.net/7j5xJ/1
Kevin Lynch
2
regex.info/… Ada Orientation: Rotate 180di EXIF.
dfsq
1
Ini adalah masalah dengan metadata foto yang menentukan orientasi. Saya tidak tahu mengapa tag gambar tidak menjelaskan hal ini. Saya belum menemukan jawaban yang bagus ...
Chet

Jawaban:

91

Saya menemukan bagian dari solusi. Gambar sekarang memiliki metadata yang menentukan orientasi foto. Ada spesifikasi CSS baru untukimage-orientation .

Cukup tambahkan ini ke CSS Anda:

img {
    image-orientation: from-image;
}

Menurut spesifikasi per 25 Januari 2016, Firefox dan iOS Safari (di belakang awalan) adalah satu-satunya browser yang mendukung ini. Saya masih melihat masalah dengan Safari dan Chrome. Namun, Safari seluler tampaknya secara asli mendukung orientasi tanpa tag CSS.

Saya kira kita harus menunggu dan melihat apakah browser akan mulai mendukung image-orientation.

Chet
sumber
3
Anehnya, browser yang saya uji (Safari, Chrome, dan Firefox pada Mac dalam inkarnasi terbaru mereka) menangani bendera dengan benar ketika gambar ditampilkan secara langsung tanpa HTML di sekitarnya.
anw
2
Hati-hati dengan ini karena bersifat eksperimental. Lihat kompatibilitas Browser, itu tidak terlihat bagus untuk sebagian besar browser. Semoga mereka akan menyelesaikan masalah ini di beberapa titik.
lostintranslation
35
Ini tidak kompatibel dengan sebagian besar browser hari ini caniuse.com/#search=image-orientation
Gabriel C
2
Mengapa di dunia ini gambar bahkan memiliki metadata orientasi? Jika Anda benar-benar ingin memutar gambar maka bukankah Anda hanya menggeser piksel dan menukar lebar dengan tinggi?
Jack Giffin
15
Bagaimana ini mendapat begitu banyak upvotes? Ini sangat tidak didukung dan tidak bekerja untuk apa pun selain firefox caniuse.com/#search=image-orientation
A Friend
26

Gambar Anda sebenarnya terbalik. Tetapi memiliki atribut meta "Orientation" yang memberitahu pemirsa bahwa itu harus diputar 180 derajat. Beberapa perangkat / pemirsa tidak mematuhi aturan ini.

Buka di Chrome: jalan kanan Buka di FF: jalan kanan Buka di IE: terbalik

Buka di Paint: Terbalik Buka di Photoshop: Jalan ke atas. dll.

i-CONICA
sumber
1
Apakah Anda tahu bagaimana kami mencegahnya sebelum pengguna mengunggah gambar? Karena gambar ini diunggah secara langsung oleh pengguna, maka saya perlu menemukan cara untuk mengatasi ini
The Lazy Log
Jika itu untuk layanan yang akan meng-host gambar, Anda sebaiknya memasukkan kembali kode gambar, untuk alasan dimensi, ukuran file, dan keamanan, jadi ini dapat memperbaikinya dalam versi yang ditandai ulang.
i-CONICA
Saya melihat. Saya perlu menemukan cara yang lebih baik untuk menangani ini. Mungkin saya perlu memproses gambar setelah diunggah ke S3
The Lazy Log
Anda dapat menggunakan perpustakaan GD di PHP.
i-CONICA
5
Cara yang lebih sederhana adalah menghapus metadata orientasi dan membalik gambar. Imagemagick menyediakan fungsi convert -autoorient yang akan melakukan ini.
saurabheights
19

Jika Anda memiliki akses ke Linux, maka buka terminal, cd ke direktori yang berisi gambar Anda dan kemudian jalankan

mogrify -auto-orient *

Ini harus secara permanen memperbaiki masalah orientasi pada semua gambar.

Paul Chris Jones
sumber
4
Ini bekerja untuk saya, Anda mungkin perlu menjalankan brew install imagemagickpada mac jika Anda mendapatkancommand not found: mogrify
Kyle
Sampai gambar berikutnya .. apakah ada kerugian?
Harry Bosh
12

Saya lupa menambahkan jawaban sendiri di sini. Saya menggunakan Ruby on Rails sehingga mungkin tidak berlaku untuk proyek Anda di PHP atau kerangka kerja lainnya. Dalam kasus saya, saya menggunakan permata Carrierwave untuk mengunggah gambar. Solusi saya adalah menambahkan kode berikut ke kelas pengunggah untuk memperbaiki masalah EXIF ​​sebelum menyimpan file.

process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end
Log Malas
sumber
1
jawaban yang bagus tetapi bagaimana saya bisa memanggil metode ini pada file gambar yang ada?
Matriks
Anda harus membuat ulang versi. Saya kira sesuatu seperti ini akan berhasil: stackoverflow.com/a/9065832/461640
The Lazy Log
11

simpan sebagai png memecahkan masalah bagi saya.

Sayur Mostafa Mousavi Kahaki
sumber
1
Solusi ini hanya berguna untuk gambar yang bukan foto: "Format JPG adalah format file terkompresi yang hilang. Ini membuatnya berguna untuk menyimpan foto pada ukuran yang lebih kecil daripada BMP. JPG adalah pilihan umum untuk digunakan di Web karena ini adalah terkompresi. Untuk menyimpan gambar garis, teks, dan grafik ikon pada ukuran file yang lebih kecil, GIF atau PNG adalah pilihan yang lebih baik karena tidak ada kerugian. " - labnol.org/software/tutorials/…
Kc Gibson
luar biasa, Dipecahkan Terima kasih
T. Shashwat
2
Menyimpannya sebagai PNG, lalu kembali ke JPG yang menjaga ukuran file rendah dan menyimpan orientasi dengan benar, terima kasih.
MDave
10

Jawaban ini dibangun di atas jawaban bsap menggunakan Exif-JS , tetapi tidak bergantung pada jQuery dan cukup kompatibel bahkan dengan browser yang lebih lama. Berikut ini adalah contoh file html dan 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
sumber
exif-js sekarang sudah usang dan tidak terawat sehingga gagal di beberapa lingkungan, seperti di mana saja di mana mode ketat diaktifkan. Kami benar-benar membutuhkan solusi untuk ini. Aplikasi saya membuat saya frustrasi dan setiap pekerjaan yang saya temukan memiliki banyak kerugian.
Metodologi
9

Anda dapat menggunakan Exif-JS , untuk memeriksa properti "Orientation" pada gambar. Kemudian terapkan transformasi css sesuai kebutuhan.

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

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

Masalah ini membuatku gila juga. Saya menggunakan PHP di sisi server saya sehingga saya tidak dapat menggunakan solusi @The Lazy Log (ruby) & @deweydb (python). Namun itu mengarahkan saya ke arah yang benar. Saya memperbaikinya di yang didukung menggunakan getImageOrientation Imagick ().

<?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); 
} 
?>

Inilah tautannya jika Anda ingin membaca lebih lanjut. http://php.net/manual/en/imagick.getimageorientation.php

pengguna4504661
sumber
6

Ini adalah data EXIF ​​yang dimasukkan oleh ponsel Samsung Anda.

Lacak DeCoy
sumber
1
Ah, jadi ini hanya terjadi dengan gambar yang diambil oleh ponsel Samsung?
The Lazy Log
4
Terjadi dengan beberapa. Saya sudah melihatnya di iPhone juga.
Trace DeCoy
Metadata EXIF ​​dapat mencakup informasi tentang foto itu sendiri (kecepatan rana, bukaan lensa, sensitivitas iso, jarak fokus, dll.), Data konteks (tanggal, waktu, suhu, kelembaban), dan mungkin berisi koordinat GPS serta sudut putaran membulat kelipatan hingga 90 °. Sebagian besar smartphone dan kamera saat ini menempatkan metadata ini di blok EXIF ​​sehingga IMHO hanya masalah waktu bahwa browser menerapkan rotasi bingkai yang benar secara otomatis.
ManuelJE
5

Hingga CSS: image-orientation:from-image;lebih didukung secara universal, kami melakukan solusi sisi server dengan python. Inilah intinya. Anda memeriksa data exif untuk orientasi, kemudian memutar gambar sesuai dan resave.

Kami lebih suka solusi ini daripada solusi sisi klien karena tidak memerlukan pemuatan sisi perpustakaan klien tambahan, dan operasi ini hanya perlu terjadi satu kali pada unggahan file.

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
sumber
3

Itu terjadi karena orientasi asli gambar tidak seperti yang kita lihat di penampil gambar. Dalam kasus-kasus seperti itu, gambar ditampilkan secara vertikal kepada kita dalam penampil gambar tetapi sebenarnya horisontal.

Untuk mengatasi ini, lakukan hal berikut:

  1. Buka gambar di editor gambar seperti cat (di windows) atau ImageMagick (di linux).

  2. Putar gambar ke kiri / kanan.

  3. Simpan gambar.

Ini harus menyelesaikan masalah secara permanen.

Yuvraj Patil
sumber
1

Cara mudah untuk memperbaiki masalah ini, tanpa pengkodean, adalah dengan menggunakan fungsi ekspor Simpan untuk Web Photoshop. Di kotak dialog, seseorang dapat memilih untuk menghapus semua atau sebagian besar data EXIF ​​gambar. Saya biasanya hanya menyimpan informasi hak cipta dan kontak. Juga, karena gambar yang datang langsung dari kamera digital sangat besar untuk tampilan web, itu adalah ide yang baik untuk mengurangi mereka melalui Save for the Web. Bagi mereka yang tidak mengerti Photoshop, saya tidak ragu bahwa ada sumber daya online untuk mengubah ukuran gambar dan menghapusnya dari data EXIF ​​yang tidak perlu.

AlGator
sumber
4
Tetapi jika Anda sedang mengembangkan aplikasi di mana pengguna dapat memilih gambar untuk diunggah, bagaimana cara menggunakan Photoshop dalam kasus itu? :)
The Lazy Log
1

Saya pikir ada beberapa masalah di browser yang secara otomatis memperbaiki orientasi gambar, misalnya, jika saya mengunjungi gambar secara langsung, itu menunjukkan orientasi yang benar, tetapi menunjukkan orientasi yang salah di beberapa halaman html keluar.

Kai Zou
sumber
-19

Gunakan gaya luar. di lembar html berikan nama kelas ke tag. dalam style sheet, gunakan operator titik diawali dengan nama kelas dan kemudian tulis kode berikut

.rotate180 {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 }
msd
sumber
Ini bukan solusi umum. Akan bekerja secara khusus pada gambar yang disediakan dalam pertanyaan
th3pirat3