JS İstemci Tarafı Exif Yönlendirme: JPEG Görüntüleri Döndürme ve Aynalama


154

Dijital kamera fotoğrafları genellikle EXIF ​​"yönlendirme" etiketi ile JPEG olarak kaydedilir. Doğru görüntülemek için, görüntülerin hangi yöne ayarlandığına bağlı olarak döndürülmesi / yansıtılması gerekir, ancak tarayıcılar görüntüyü oluşturan bu bilgileri yok sayar. Büyük ticari web uygulamalarında bile, EXIF ​​yönlendirme desteği sivilceli olabilir 1 . Aynı kaynak, bir JPEG'in sahip olabileceği 8 farklı yönlendirmenin güzel bir özetini sunar :

EXIF Yönelimlerinin Özeti

Örnek görüntüler 4 .

Soru, istemci tarafında görüntünün doğru şekilde görüntülenmesi ve gerekirse daha fazla işlenmesi için nasıl döndürüleceği / yansıtılacağıdır.

Yönlendirme özniteliği 2 de dahil olmak üzere EXIF ​​verilerini ayrıştırmak için kullanılabilen JS kitaplıkları vardır . Flickr, büyük resimleri ayrıştırırken, web işçilerinin kullanılmasını gerektiren olası performans sorununa dikkat çekti 3 .

Konsol araçları görüntüleri doğru şekilde yeniden yönlendirebilir 5 . Sorunu çözen bir PHP betiği 6'da

Yanıtlar:


145

Github projesi JavaScript-Load-Image , EXIF ​​yönlendirme sorununa eksiksiz bir çözüm sunar ve 8 exif yönünün tümü için görüntüleri doğru şekilde döndürür / yansıtır. Javascript exif oryantasyonunun çevrimiçi demosuna bakın

Görüntü bir HTML5 tuvaline çizilir. Doğru işleme tuval işlemleri aracılığıyla js / load-image-orientation.js içinde uygulanır.

Umarım bu başka birine zaman kazandırır ve arama motorlarına bu açık kaynak gemini öğretir :)


1
Bu kütüphaneyi kullanıyorum ancak son zamanlarda en çok çalışmak için ihtiyaç duyduğum iOS 8.3'te kırıldı :(
Gordon Sun

2
Bunun nasıl faydalı olduğunu görmek için gerçekten uğraşıyorum. Ben bir sayfa ayrıştırmak ve döndürülmesi gerektiğinde görüntüleri döndürebilir ya da aslında yüklemeden önce yönünü tespit ve (bir şekilde) dosyayı döndürmek öğrenmek için çalışırken ile oynuyorum. Demo da bunu yapmıyor. Sadece bir dosya girişinden bir dosya alır ve doğru şekilde görüntüler, bu gerçek dünyada ne zaman yararlıdır? Sayfamı ayrıştırdığımda ve URL'leri resim etiketlerinden loadImage kütüphanesine beslediğimde exif verisi olmadığından bunu yapamıyorum. Yükleme için bir tuval nesnesi döndürür, bu yüzden bunu sunucuya veya başka bir şeye gönderemem.
görmezden gelme

3
@igneosaur: base64 kodlu verileri sunucuya gönderebilir canvas.toDataURL()ve kodunu çözebilir ve sunucu tarafına kaydedebilirsiniz.
br4nnigan

1
load-image projesini kullanmak yerine, kod tabanının bir kısmını kendiniz pişirmek için kullanabilirsiniz - sadece github.com/blueimp/JavaScript-Load-Image/blob/master/js/… adresine bakın .
Andy Lorenz

1
Bu kütüphanenin ürettiği tuvali normal bir <img>etiket gibi duyarlı hale getirmenin bir yolu var mı ?
Erik Berkun-Drevnig

103

Mederr'ın bağlam dönüşümü mükemmel çalışıyor. Yönü çıkarmanız gerekiyorsa yalnızca bu işlevi kullanın - herhangi bir EXIF ​​okuma kütüphanesine ihtiyacınız yoktur. Aşağıda, base64 görüntüsünde yönlendirmeyi yeniden ayarlamak için bir işlev vardır. İşte bunun için bir keman . Ayrıca oryantasyon çıkarma demosu ile bir keman hazırladım .

function resetOrientation(srcBase64, srcOrientation, callback) {
  var img = new Image();    

  img.onload = function() {
    var width = img.width,
        height = img.height,
        canvas = document.createElement('canvas'),
        ctx = canvas.getContext("2d");

    // set proper canvas dimensions before transform & export
    if (4 < srcOrientation && srcOrientation < 9) {
      canvas.width = height;
      canvas.height = width;
    } else {
      canvas.width = width;
      canvas.height = height;
    }

    // transform context before drawing image
    switch (srcOrientation) {
      case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
      case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
      case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
      case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
      case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
      case 7: ctx.transform(0, -1, -1, 0, height, width); break;
      case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
      default: break;
    }

    // draw image
    ctx.drawImage(img, 0, 0);

    // export base64
    callback(canvas.toDataURL());
  };

  img.src = srcBase64;
};

7
Yönlendirmedeki varsayılan durum switchgerekli değildir, çünkü bu dönüşüm hiçbir şey yapmaz. Ayrıca, daha hızlı ve daha az kaynak yoğun olduğundan (hem RAM hem de CPU) srcOrientation > 4 && srcOrientation < 9yerine kullanmayı düşünün [5,6,7,8].indexOf(srcOrientation) > -1. Orada diziye gerek yok. Bu, her bitin önemli olduğu çok sayıda görüntü toplu işlerken önemlidir. Aksi takdirde, oldukça iyi bir cevap. Upvoted!
Ryan Casas

4
@RyanCasas indexOfTeklif ettiğinizle ne kadar ağır olabileceğinin farkında değildim . 10M yinelemeleriyle basit bir döngü çalıştırdım ve% 1400 daha hızlıydı. Nice: D Teşekkürler!
WunderBart

1
Bu yanıtı bir Android WebView'da kullandım ve bir WebView içinde WebGL'yi desteklemeyen bazı Android cihazların olduğu ortaya çıktı (bkz. Bugs.chromium.org/p/chromium/issues/detail?id=555116 ) görüntünün boyutuna bağlı olarak döndürme bu tür aygıtlarda çok uzun sürebilir.
ndreisg

1
Referansla kullanıldığında, bunun getOrientationperformans açısından verimli olup olmadığını merak ediyorum. getOrientationaramaları fileReader.readAsArrayBuffer, sonra diyoruz URL.createObjectURLve içine geçmesi sonucunu resetOrientationbir görüntü olarak hangi yükleri bu URL. Bu, görüntü dosyasının tarayıcı tarafından bir kez değil iki kez "yükleneceği" / okunacağı anlamına mı geliyor yoksa yanlış anlıyor muyum?
Oliver Joseph Ash

1
Ayrıca, yönlendirmeye zaten saygı duyulacak tarayıcılar hakkında ne yapmalı? Bunun iOS Safari'de ve image-orientation: from-imagekullanıldığında CSS'yi destekleyen tarayıcılarda böyle olduğuna inanıyorum .
Oliver Joseph Ash

39

Eğer

width = img.width;
height = img.height;
var ctx = canvas.getContext('2d');

Sonra yönünü görüntüyü açmak için bu dönüşümleri kullanabilirsiniz 1

Yönelimden:

  1. ctx.transform(1, 0, 0, 1, 0, 0);
  2. ctx.transform(-1, 0, 0, 1, width, 0);
  3. ctx.transform(-1, 0, 0, -1, width, height);
  4. ctx.transform(1, 0, 0, -1, 0, height);
  5. ctx.transform(0, 1, 1, 0, 0, 0);
  6. ctx.transform(0, 1, -1, 0, height, 0);
  7. ctx.transform(0, -1, -1, 0, height, width);
  8. ctx.transform(0, -1, 1, 0, 0, width);

Resmi ctx üzerine çizmeden önce


58
burada ne oluyor?
Muhammed Umer

1
Bununla sadece yönlendirmeyi bilmeniz (örn. EXIF ​​aracılığıyla) ve sonra gerektiği gibi döndürmeniz gerekir. Aradığımın yarısı.
Brenden

2
Bu dönüşümler benim için işe yaramadı - bunun yerine iyi kanıtlanmış kod olduğuna inandığım şeyi elde etmek için github.com/blueimp/JavaScript-Load-Image/blob/master/js/… 'deki yük görüntüsü projesinden kodu kullandım. tuval bağlamında hem çevirme, döndürme işlemlerini hem de bir genişlik / yükseklik takasını kullanan. Vb dönüşüm diğer girişimleri ile birçok saat deneyden sonra bana% 100 sonuç verdi
Andy Lorenz

1
Görüntüyü ctx üzerine çizdiğinizde neden önemlidir? Üzerine bir resim çizdikten sonra tuvali döndüremez misiniz?
AlxVallejo

Yönelim 8 için döndürme benim için şu şekilde çalışır: ctx.transform (0, -1, 1, 0, 0, yükseklik);
Giorgio Barchiesi

24

@ user3096626 yanıtına ek olarak birisi kod örneği sağladıysa daha yararlı olacağını düşünüyorum, aşağıdaki örnek url'den (uzak görüntüler) gelen görüntü yönünü nasıl düzelteceğinizi gösterecektir:


Çözüm 1: Javascript Kullanma (Önerilir)

  1. çünkü yük görüntü kütüphanesi url görüntüleri sadece (dosya / damla) den exif etiketleri çıkarmakla kalmayıp, her iki kullanacağız exif-js ve yük görüntü bu yüzden ilk olarak izleyin sayfanıza bu kitaplıklar eklemek javascript kütüphaneleri:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.1.0/exif.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image-scale.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image-orientation.min.js"></script>

    Not exif-js 2.2 sahiptir görünüyor sürümünü sorunları biz 2.1 kullanılan böylece

  2. o zaman temelde yapacağımız şey

    a - kullanarak görüntüyü yükleyin window.loadImage()

    b - kullanarak exif etiketlerini okuyun window.EXIF.getData()

    c - görüntüyü tuvale dönüştürün ve kullanarak görüntü yönünü düzeltin window.loadImage.scale()

    d - tuvali belgeye yerleştirin

Hadi bakalım :)

window.loadImage("/your-image.jpg", function (img) {
  if (img.type === "error") {
    console.log("couldn't load image:", img);
  } else {
    window.EXIF.getData(img, function () {
        var orientation = EXIF.getTag(this, "Orientation");
        var canvas = window.loadImage.scale(img, {orientation: orientation || 0, canvas: true});
        document.getElementById("container").appendChild(canvas); 
        // or using jquery $("#container").append(canvas);

    });
  }
});

tabii ki ayrıca tuval nesnesinden base64 olarak görüntü alabilir ve img src özniteliğine yerleştirebilirsiniz, böylece jQuery kullanarak yapabilirsiniz;)

$("#my-image").attr("src",canvas.toDataURL());

tam kodu şurada bulabilirsiniz: github: https://github.com/digital-flowers/loadimage-exif-example


Çözüm 2: Html (Tarayıcı Korsanlığı) Kullanma

çok hızlı ve kolay bir saldırı var, görüntü herhangi bir html olmadan doğrudan yeni bir sekme içinde açılırsa çoğu tarayıcı görüntüyü doğru yönde görüntüler (LOL i bilmiyorum neden), bu nedenle temelde resminizi iframe kullanarak görüntüleyebilirsiniz iframe src niteliğini doğrudan resim URL'si olarak koyarak:

<iframe src="/my-image.jpg"></iframe>

Çözüm 3: CSS Kullanma (iOS'ta yalnızca Firefox ve Safari)

görüntü yönünü düzeltmek için css3 özelliği var ama sorun sadece firefox ve safari / ios üzerinde çalışıyor, çünkü yine de yakında tüm tarayıcılar için kullanılabilir olacak ( caniuse Tarayıcı destek bilgileri )

img {
   image-orientation: from-image;
}

Çözüm 1 benim için çalışmadı. Image.geImade undefined
Perry

Bu, 1. adımda bahsettiğim kütüphaneleri eklemediyseniz oldu
Fareed Alnamrouti

Kütüphaneleri dahil ettim. Örneğinizin sadeliğini seviyorum ama bu hata mesajını almaya devam ediyorum.
Perry

1
exif-js kırılmış gibi görünüyor, lütfen düzenlememi kontrol et ben de github tam kod ekledim: github.com/digital-flowers/loadimage-exif-example
Fareed Alnamrouti

1
Tamam github projesine göz atın yeni bir dosya "upload.html" var, hoş geldiniz :)
Fareed Alnamrouti

10

Giriş kontrolünden bir dosyaya sahip olanlar için, yönünün ne olduğunu bilmiyorum, biraz tembel ve aşağıda büyük bir kütüphane eklemek istemiyorsa, @WunderBart tarafından verilen cevapla eritilmiş kod ( https://stackoverflow.com/a/32490603 ) yönlendirmeyi bulur.

function getDataUrl(file, callback2) {
        var callback = function (srcOrientation) {
            var reader2 = new FileReader();
            reader2.onload = function (e) {
                var srcBase64 = e.target.result;
                var img = new Image();

                img.onload = function () {
                    var width = img.width,
                        height = img.height,
                        canvas = document.createElement('canvas'),
                        ctx = canvas.getContext("2d");

                    // set proper canvas dimensions before transform & export
                    if (4 < srcOrientation && srcOrientation < 9) {
                        canvas.width = height;
                        canvas.height = width;
                    } else {
                        canvas.width = width;
                        canvas.height = height;
                    }

                    // transform context before drawing image
                    switch (srcOrientation) {
                        case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
                        case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
                        case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
                        case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
                        case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
                        case 7: ctx.transform(0, -1, -1, 0, height, width); break;
                        case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
                        default: break;
                    }

                    // draw image
                    ctx.drawImage(img, 0, 0);

                    // export base64
                    callback2(canvas.toDataURL());
                };

                img.src = srcBase64;
            }

            reader2.readAsDataURL(file);
        }

        var reader = new FileReader();
        reader.onload = function (e) {

            var view = new DataView(e.target.result);
            if (view.getUint16(0, false) != 0xFFD8) return callback(-2);
            var length = view.byteLength, offset = 2;
            while (offset < length) {
                var marker = view.getUint16(offset, false);
                offset += 2;
                if (marker == 0xFFE1) {
                    if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1);
                    var little = view.getUint16(offset += 6, false) == 0x4949;
                    offset += view.getUint32(offset + 4, little);
                    var tags = view.getUint16(offset, little);
                    offset += 2;
                    for (var i = 0; i < tags; i++)
                        if (view.getUint16(offset + (i * 12), little) == 0x0112)
                            return callback(view.getUint16(offset + (i * 12) + 8, little));
                }
                else if ((marker & 0xFF00) != 0xFF00) break;
                else offset += view.getUint16(offset, false);
            }
            return callback(-1);
        };
        reader.readAsArrayBuffer(file);
    }

kolayca böyle denilebilir

getDataUrl(input.files[0], function (imgBase64) {
      vm.user.BioPhoto = imgBase64;
});

2
Google tarafından 2 saatten fazla arama yaptıktan sonra teşekkür ederim Doğru çözümü buluyorum.
Mr.Trieu

2
neden birisi daha hafif bir çözümü tercih etmek için tembel olur?
dewd

4
Daktilo'ya taşındı ve yaklaşık 4 saniye ila ~ 20 milisaniye arasında optimize edildi. Base64 kodlaması darboğazdı - image/jpegvarsayılan yerine kullanmak image/pngve çıktı görüntüsünü maksimum genişliğe (benim durumumda 400 piksel) yeniden boyutlandırmak büyük bir fark yarattı. (bu küçük resimler için iyi çalışır, ancak görüntünün tamamını görüntülemeniz gerekiyorsa,
base64'ten

8

WunderBart'ın cevabı benim için en iyisiydi. Resimleriniz genellikle doğru yönde ise, yalnızca önce yönlendirmeyi test ederek ve döndürme gerekmiyorsa kodun geri kalanını atlayarak çok hızlandırabileceğinizi unutmayın.

Wunderbart'ın tüm bilgilerini bir araya getirmek, böyle bir şey;

var handleTakePhoto = function () {
    let fileInput: HTMLInputElement = <HTMLInputElement>document.getElementById('photoInput');
    fileInput.addEventListener('change', (e: any) => handleInputUpdated(fileInput, e.target.files));
    fileInput.click();
}

var handleInputUpdated = function (fileInput: HTMLInputElement, fileList) {
    let file = null;

    if (fileList.length > 0 && fileList[0].type.match(/^image\//)) {
        isLoading(true);
        file = fileList[0];
        getOrientation(file, function (orientation) {
            if (orientation == 1) {
                imageBinary(URL.createObjectURL(file));
                isLoading(false);
            }
            else 
            {
                resetOrientation(URL.createObjectURL(file), orientation, function (resetBase64Image) {
                    imageBinary(resetBase64Image);
                    isLoading(false);
                });
            }
        });
    }

    fileInput.removeEventListener('change');
}


// from http://stackoverflow.com/a/32490603
export function getOrientation(file, callback) {
    var reader = new FileReader();

    reader.onload = function (event: any) {
        var view = new DataView(event.target.result);

        if (view.getUint16(0, false) != 0xFFD8) return callback(-2);

        var length = view.byteLength,
            offset = 2;

        while (offset < length) {
            var marker = view.getUint16(offset, false);
            offset += 2;

            if (marker == 0xFFE1) {
                if (view.getUint32(offset += 2, false) != 0x45786966) {
                    return callback(-1);
                }
                var little = view.getUint16(offset += 6, false) == 0x4949;
                offset += view.getUint32(offset + 4, little);
                var tags = view.getUint16(offset, little);
                offset += 2;

                for (var i = 0; i < tags; i++)
                    if (view.getUint16(offset + (i * 12), little) == 0x0112)
                        return callback(view.getUint16(offset + (i * 12) + 8, little));
            }
            else if ((marker & 0xFF00) != 0xFF00) break;
            else offset += view.getUint16(offset, false);
        }
        return callback(-1);
    };

    reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
};

export function resetOrientation(srcBase64, srcOrientation, callback) {
    var img = new Image();

    img.onload = function () {
        var width = img.width,
            height = img.height,
            canvas = document.createElement('canvas'),
            ctx = canvas.getContext("2d");

        // set proper canvas dimensions before transform & export
        if (4 < srcOrientation && srcOrientation < 9) {
            canvas.width = height;
            canvas.height = width;
        } else {
            canvas.width = width;
            canvas.height = height;
        }

        // transform context before drawing image
        switch (srcOrientation) {
            case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
            case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
            case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
            case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
            case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
            case 7: ctx.transform(0, -1, -1, 0, height, width); break;
            case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
            default: break;
        }

        // draw image
        ctx.drawImage(img, 0, 0);

        // export base64
        callback(canvas.toDataURL());
    };

    img.src = srcBase64;
}

1
Harika bir yaklaşım. Ayrıca, jpgs olmayan veya döndürme verileri olmadan görüntüleri döndürmeye çalışmamanız için -2ve -1geri dönmeyi de düşünmelisiniz getOrientation.
Steven Lambert

Daha fazla optimizasyon yaptım, yukarıdaki yorumuma bakın - file.slice()optimizasyonunuzu da yeni ekledim , ancak asıl destek, daha image/jpegküçük veri URL'leri oluşturmak için daha küçük resimler ve çıktı biçimi kullanmaktan geliyor . (10 megapiksel görüntüler için bile fark edilebilir bir gecikme yoktur.)
mindplay.dk

file.slice()Base64 görüntü kaynaklarının desteklenmesini engelleyeceğiniz için dikkatli olun.
Mark

Teşekkürler mark - alternatif için bir düzenleme sağlamak ister misiniz?
statler

7

Bir astar var mı?

Kimsenin browser-image-compressionkütüphaneden bahsettiğini görmedim . Bunun için mükemmel bir yardımcı işlevi var.

Kullanımı: const orientation = await imageCompression.getExifOrientation(file)

Böyle yararlı bir araç başka birçok yönden de.


Bu yönlendirmeyi alır. Ancak bu bilgileri kullanarak istemci tarafında yeni bir .jpg dosyası nesnesi nasıl oluştururum?
masterxilo

FileBildiğim kadarıyla nesne oluşturamazsınız . Bir sonraki en iyi şey, görüntüyü ve yönlendirmeyi sunucuya göndermek ve orada dosya manipülasyonu yapmak olacaktır. Yoksa kullanarak bir base64 dize oluşturabilir canvasve toDataURLyöntemi.
gilbert-v

1
Hayır sadece bir Blob bir File nesnesi oluşturabilirsiniz. Dosya Dosyası (Dizi parçaları, Dize dosya adı, BlobPropertyBag özellikleri); developer.mozilla.org/de/docs/Web/API/File
masterxilo

2
Altın çıkartma! @masterxilo
gilbert-v

2
Bu benim için harika çalıştı! Son 2 gündür oryantasyonla mücadele ediyordum! Gönderilen tüm dönüşüm anahtarı ifadeleri, herhangi bir nedenle telefonumdan portre görüntülerini işlemez, siyah çubuklar olurdu. Muhtemelen aynı anda sıkıştırmaya ve döndürmeye çalıştığım için.
cjd82187


1

Karma çözüm (php + css) kullanıyorum.

Kaplar aşağıdakiler için gereklidir:

  • div.imgCont2 döndürmek için gerekli kap;
  • div.imgCont1kapsayıcı zoomOut için gerekli - width:150%;
  • div.imgCont görüntü zoomOut olduğunda kaydırma çubukları için kapsayıcı gerekir.

.

<?php
    $image_url = 'your image url.jpg';
    $exif = @exif_read_data($image_url,0,true);
    $orientation = @$exif['IFD0']['Orientation'];
?>

<style>
.imgCont{
    width:100%;
    overflow:auto;
}
.imgCont2[data-orientation="8"]{
    transform:rotate(270deg);
    margin:15% 0;
}
.imgCont2[data-orientation="6"]{
    transform:rotate(90deg);
    margin:15% 0;
}
.imgCont2[data-orientation="3"]{
    transform:rotate(180deg);
}
img{
    width:100%;
}
</style>

<div class="imgCont">
  <div class="imgCont1">
    <div class="imgCont2" data-orientation="<?php echo($orientation) ?>">
      <img src="<?php echo($image_url) ?>">
    </div>
  </div>
</div>

Teşekkürler, bu zaten benim ihtiyaçları için en iyi çözüm gibi görünüyor. Harici kütüphanelere ve gereksiz kodların uzun bloklarına gerek yoktur. Sadece exif'ten php ile yönlendirmeyi belirleyin, görünüme gönderin ve uygun sayıda derece döndüren CSS sınıflarını tetiklemek için kullanın. Güzel ve temiz! Düzenle: Bu, exif verilerini gerçekten okuyan ve buna göre dönen tarayıcılarda görüntüleri aşırı döndürür. AKA, sorunu masaüstünde düzeltir, ancak ios safari'de yeni bir sorun oluşturur.
cwal

0

@Fareed namrouti'nin cevabına ek olarak,

Görüntünün bir dosya giriş öğesinden taranması gerekiyorsa bu kullanılmalıdır

<input type="file" name="file" id="file-input"><br/>
image after transform: <br/>
<div id="container"></div>

<script>
    document.getElementById('file-input').onchange = function (e) {
        var image = e.target.files[0];
        window.loadImage(image, function (img) {
            if (img.type === "error") {
                console.log("couldn't load image:", img);
            } else {
                window.EXIF.getData(image, function () {
                    console.log("load image done!");
                    var orientation = window.EXIF.getTag(this, "Orientation");
                    var canvas = window.loadImage.scale(img,
                        {orientation: orientation || 0, canvas: true, maxWidth: 200});
                    document.getElementById("container").appendChild(canvas);
                    // or using jquery $("#container").append(canvas);
                });
            }
        });
    };
</script>

0

Görüntüyü döndüren küçük bir php betiği yazdım. Her isteği yeniden hesaplamak için resmi sakladığınızdan emin olun.

<?php

header("Content-type: image/jpeg");
$img = 'IMG URL';

$exif = @exif_read_data($img,0,true);
$orientation = @$exif['IFD0']['Orientation'];
if($orientation == 7 || $orientation == 8) {
    $degrees = 90;
} elseif($orientation == 5 || $orientation == 6) {
    $degrees = 270;
} elseif($orientation == 3 || $orientation == 4) {
    $degrees = 180;
} else {
    $degrees = 0;
}
$rotate = imagerotate(imagecreatefromjpeg($img), $degrees, 0);
imagejpeg($rotate);
imagedestroy($rotate);

?>

Şerefe

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.