img etiketi yanlış yön gösteriyor

142

Bu bağlantıda bir resmim var : http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

Gördüğünüz gibi, bu doğru yönde olan normal bir görüntüdür. Ancak, bu bağlantıyı resim etiketimin src özelliğine ayarladığımda, görüntü baş aşağı olur. http://jsfiddle.net/7j5xJ/

<img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/>
Snippet'i genişlet

Neler olup bittiğine dair bir fikrin var mı?

html  css  image 
— Tembel Kütük
kaynak
Firefox'ta her iki durumda da baş aşağı. Chrome'un EXIF ​​bilgilerine dayanarak otomatik olarak döndürecek kadar akıllı olduğunu düşünüyorum.
— dfsq
Gerçekten mi? Firefox'umda orijinal hala normal ve img'deki görüntü baş aşağı.
— Tembel Kütük
1
Sanırım görüntünün kendisi baş aşağı ve cloudfrontsayfa döndürüyor olabilir. CSS üzerinden bir döndürmeyi zorlayabilirsiniz jsfiddle.net/7j5xJ/1
— Kevin Lynch
2
regex.info/… EXIF'te var Orientation: Rotate 180.
— dfsq
1
Yönü belirten fotoğraf meta verileriyle ilgili bir sorundur. Resim etiketinin neden bunu hesaba katmadığını bilmiyorum. Henüz iyi bir cevap bulamadım ...
— Chet

Yanıtlar:

91

Çözümün bir parçasını buldum. Görüntüler artık fotoğrafın yönünü belirten meta verilere sahip. İçin yeni bir CSS özelliği varimage-orientation .

Bunu CSS'nize eklemeniz yeterlidir:

img {
    image-orientation: from-image;
}

25 Ocak 2016'daki spesifikasyonlara göre, Firefox ve iOS Safari (ön ekin arkasında) bunu destekleyen tek tarayıcılar. Hala Safari ve Chrome ile ilgili sorunlar görüyorum. Bununla birlikte, mobil Safari, CSS etiketi olmadan yönlendirmeyi yerel olarak destekliyor gibi görünüyor.

Sanırım beklemek ve tarayıcıların desteklemeye başlayıp başlamayacağını görmek zorundayız image-orientation.

— Chet
kaynak
3
Test ettiğim garip tarayıcılar (son enkarnasyonlarında Mac'te Safari, Chrome ve Firefox), görüntü etrafında herhangi bir HTML olmadan doğrudan görüntülendiğinde bayrağı düzgün işliyor.
— ANW
2
Deneysel olduğu için buna dikkat edin. Tarayıcı uyumluluğuna göz atın, çoğu tarayıcı için iyi görünmüyor. Umarım bunu bir noktada çözerler.
— lostintranslation
35
Bu, bugün çoğu tarayıcıyla uyumlu değil caniuse.com/#search=image-orientation
— Gabriel C
2
Neden dünyanın görüntüleri oryantasyon meta verisi var? Resmi gerçekten döndürmek istiyorsanız, pikseller arasında dolaşıp yükseklik için genişliği değiştirmez misiniz?
— Jack Giffin
15
Bunun nasıl bu kadar çok oyu var? Son derece desteklenmiyor ve firefox dışında hiçbir şey için çalışmıyor caniuse.com/#search=image-orientation
— Bir Arkadaş
26

Resminiz aslında baş aşağı. Ancak izleyiciye 180 derece döndürülmesi gerektiğini söyleyen bir "Yön" meta özelliğine sahiptir. Bazı cihazlar / görüntüleyenler bu kurala uymaz.

Chrome'da aç: doğru yol FF'de aç: doğru yol IE'de aç: baş aşağı

Paint'te açın: Baş aşağı Photoshop'ta açın: Yukarı doğru. vb.

— i-göbeği
kaynak
1
Kullanıcı resmi yüklemeden önce bunları nasıl önleyebileceğimiz hakkında bir fikriniz var mı? Bu resim doğrudan kullanıcı tarafından yüklendiği için, bunun üstesinden gelmek için bir yol bulmalıyım
— The Lazy Log
Görüntüleri barındıracak bir hizmet için, boyut, dosya boyutu ve güvenlik nedenleriyle görüntüleri en iyi şekilde yeniden kodlamanız gerekir, bu nedenle bunları yeniden kodlanmış sürümde düzeltebilir.
— i-CONICA
Anlıyorum. Bunu halletmek için daha iyi bir yol bulmam gerekecek. Belki de S3'e yükledikten sonra görüntüyü işlemem gerekiyor
— The Lazy Log
GD kütüphanesini PHP'de kullanabilirsiniz.
— i-CONICA
5
Daha basit bir yol, yönlendirme meta verilerini kaldırmak ve görüntüyü çevirmektir. Imagemagick bunu yapacak convert -autoorient işlevi sağlar.
— saurabheights
19

Linux'a erişiminiz varsa, bir terminal açın, resimlerinizi içeren dizine cd yapın ve çalıştırın

mogrify -auto-orient *

Bu, tüm görüntülerdeki yönelim sorunlarını kalıcı olarak düzeltmelidir.

— Paul Chris Jones
kaynak
4
Bu benim için çalıştı, alırsanız brew install imagemagickmac üzerinde çalıştırmak gerekebilircommand not found: mogrify
— Kyle
Bir sonraki görüntüye kadar .. herhangi bir dezavantajı var mı?
— Harry Bosh
12

Buraya kendi cevabımı eklemeyi unuttum. Ruby on Rails kullanıyordum, bu yüzden PHP veya diğer çerçevelerdeki projeleriniz için geçerli olmayabilir. Benim durumumda, görüntüleri yüklemek için Carrierwave gem kullanıyordum. Benim çözüm dosyayı kaydetmeden önce EXIF ​​sorunu gidermek için uploader sınıfına aşağıdaki kodu eklemek oldu.

process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end
— Tembel Kütük
kaynak
1
iyi cevap ama bu yöntemi mevcut görüntü dosyasında nasıl çağırabilirim?
— Matrix
Sürümleri yeniden oluşturmanız gerekir. Bunun gibi bir şey işe yarayacağını tahmin ediyorum: stackoverflow.com/a/9065832/461640
— The Lazy Log
11

png olarak kaydet benim için sorunu çözdü.

— Seyed Mostafa Mousavi Kahaki
kaynak
1
Bu çözüm yalnızca fotoğraf olmayan görüntüler için kullanışlıdır: "JPG formatı kayıplı sıkıştırılmış bir dosya formatıdır. Bu, fotoğrafları BMP'den daha küçük boyutta depolamak için yararlıdır. JPG, Web'de kullanım için yaygın bir seçimdir, çünkü Çizgi çizimleri, metin ve ikonik grafikleri daha küçük bir dosya boyutunda depolamak için, GIF veya PNG kayıpsız oldukları için daha iyi seçimlerdir. " - labnol.org/software/tutorials/…
— Kc Gibson
harika, Çözüldü Teşekkürler
— T. Shashwat
2
PNG olarak kaydedildi, daha sonra tekrar dosya boyutunu düşük tutan ve yönlendirmeyi doğru şekilde kaydeden JPG'ye geri teşekkürler.
— MDave
10

Bu yanıt, bsap'ın Exif-JS kullanarak verdiği cevaba dayanmaktadır, ancak jQuery'ye dayanmamaktadır ve eski tarayıcılarla bile oldukça uyumludur. Örnek html ve js dosyaları şunlardır:

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
kaynak
exif-js artık çok modası geçmiş ve bakımı yapılmamış, katı modun etkinleştirildiği herhangi bir yer gibi bazı ortamlarda başarısız oluyor. Bunun için gerçekten bir çözüme ihtiyacımız var. Uygulamam boktan sinir bozucu ve bulduğum her iş çevresinde geniş dezavantajları var.
— Methodician
9

Görüntünün "Yön" özelliğini denetlemek için Exif-JS'yi kullanabilirsiniz . Ardından gerektiği şekilde bir css dönüşümü uygulayın.

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

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

Bu sorun da beni deli ediyordu. Ben sunucu tarafında PHP kullanıyordum, bu yüzden @The Lazy Log (ruby) & @deweydb (python) çözümlerini kullanamadım. Ancak beni doğru yöne çekti. Imagick's getImageOrientation () kullanarak destekli sabit.

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

Daha fazla okumak istiyorsanız link. http://php.net/manual/en/imagick.getimageorientation.php

— user4504661
kaynak
6

Samsung telefonunuzun EXIF ​​verileri.

— Trace DeCoy
kaynak
1
Ah, bu sadece Samsung telefonun çektiği görüntülerde mi oluyor?
— Tembel Günlüğü
4
Birkaç kişiyle olur. Bunu iPhone'larda da gördüm.
— Trace DeCoy
EXIF meta verileri fotoğrafın kendisi (deklanşör hızı, lens diyaframı, iso hassasiyeti, odak mesafesi, vb.), Bağlam verileri (tarih, saat, sıcaklık, nem) hakkında bilgi içerebilir ve GPS koordinatlarını ve yuvarlatılmış dönüş açısını içerebilir 90 ° 'ye kadar çoklu. Günümüzün akıllı telefonlarının ve kameralarının büyük bir çoğunluğu bu meta verileri EXIF ​​bloğuna koyuyor, bu nedenle IMHO, tarayıcıların doğru kare döndürmeyi otomatik olarak uygulaması sadece bir zaman meselesi.
— ManuelJE
5

CSS'ye kadar: image-orientation:from-image;daha evrensel olarak desteklenene kadar , python ile sunucu tarafında bir çözüm yapıyoruz. İşte özü. Exif verilerini yön için kontrol edin, ardından görüntüyü uygun şekilde döndürün ve yeniden kaydedin.

Ek kütüphanelerin istemci tarafının yüklenmesini gerektirmediği için bu çözümü istemci tarafı çözümlerine tercih ediyoruz ve bu işlemin dosya yükleme sırasında sadece bir kez yapılması gerekiyor.

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

Görüntünün orijinal yönlendirmesi, resim görüntüleyicide gördüğümüz gibi olmadığından olur. Bu gibi durumlarda, resim görüntüleyicide görüntü bize dikey olarak gösterilir, ancak gerçekte yataydır.

Bu sorunu çözmek için aşağıdakileri yapın:

  1. Resmi paint (pencere içinde) veya ImageMagick (linux) gibi resim düzenleyicide açın.

  2. Görüntüyü sola / sağa döndür.

  3. Görüntüyü kaydedin.

Bu, sorunu kalıcı olarak çözmelidir.

— Yuvraj Patil
kaynak
1

Sorunu çözmenin kolay bir yolu olan sans kodlaması, Photoshop'un Web için Kaydet dışa aktarma işlevini kullanmaktır. İletişim kutusunda bir görüntünün EXIF ​​verilerinin tümünü veya çoğunu kaldırmayı seçebilirsiniz. Genellikle telif hakkını ve iletişim bilgilerini saklarım. Ayrıca, doğrudan bir dijital kameradan gelen görüntüler web ekranı için büyük boy olduğundan, Save for the Web üzerinden bunları küçültmek iyi bir fikirdir. Photoshop bilgisine sahip olmayanlar için, bir görüntüyü yeniden boyutlandırmak ve gereksiz EXIF ​​verisinden sıyırmak için çevrimiçi kaynaklar olduğundan şüphem yok.

— AlGator
kaynak
4
Ancak, kullanıcıların yüklemek için herhangi bir görüntü seçebilecekleri bir uygulama geliştiriyorsanız, bu durumda Photoshop nasıl kullanılır? :)
— The Lazy Log
1

Tarayıcı otomatik düzeltme görüntü yönlendirmesinde bazı sorunlar olduğunu düşünüyorum, örneğin, resmi doğrudan ziyaret edersem, doğru yönü gösterir, ancak bazı çıkış html sayfasında yanlış yönlendirme gösterir.

— Kai Zou
kaynak
-19

Harici stil kullanın. html sayfasında etikete sınıf adını verin. stil sayfasında, sınıf adından önce gelen nokta operatörünü kullanın ve sonra aşağıdaki kodu yazın

.rotate180 {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 }
— msd
kaynak
Genelleştirilmiş bir çözüm değildir. Özellikle söz konusu görüntü üzerinde çalışacaktır
— th3pirat3
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.