Foto kamera digital sering disimpan sebagai JPEG dengan tag "orientasi" EXIF. Untuk menampilkan dengan benar, gambar perlu diputar / dicerminkan tergantung pada orientasi mana yang diatur, tetapi browser mengabaikan informasi ini membuat gambar. Bahkan dalam aplikasi web komersial besar, dukungan untuk orientasi EXIF ​​bisa sangat sulit 1 . Sumber yang sama juga memberikan ringkasan yang bagus tentang 8 orientasi berbeda yang dapat dimiliki JPEG:

Contoh gambar tersedia di 4 .

Pertanyaannya adalah bagaimana memutar / mirror gambar pada sisi klien sehingga ditampilkan dengan benar dan dapat diproses lebih lanjut jika perlu?

Ada pustaka JS yang tersedia untuk mem-parsing data EXIF, termasuk atribut orientasi 2 . Flickr mencatat kemungkinan masalah kinerja saat mem-parsing gambar besar, membutuhkan penggunaan webworkers 3 .

Alat konsol dapat dengan benar mengarahkan ulang gambar 5 . Skrip PHP yang memecahkan masalah tersedia di 6

Proyek github, JavaScript-Load-Image, memberikan solusi lengkap untuk masalah orientasi EXIF, dengan memutar / mirroring gambar dengan benar untuk semua 8 orientasi exif. Lihat demo online orientasi javascript exif

Gambar digambar di atas kanvas HTML5. Render yang benar diimplementasikan dalam js / load-image-orient.js melalui operasi kanvas.

Semoga ini menghemat waktu orang lain, dan ajarkan mesin pencari tentang permata open source ini :)

Transformasi konteks Mederr bekerja dengan sempurna. Jika Anda perlu mengekstrak orientasi, gunakan saja fungsi ini - Anda tidak memerlukan libs pembacaan EXIF. Di bawah ini adalah fungsi untuk mengatur ulang orientasi pada gambar base64. Ini biola untuk itu . Saya juga menyiapkan biola dengan demo ekstraksi orientasi .

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

Jika

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

Kemudian Anda dapat menggunakan transformasi ini untuk mengubah gambar ke orientasi 1

Dari orientasi:

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

Sebelum menggambar gambar pada ctx

ok selain jawaban @ user3096626 saya pikir akan lebih membantu jika seseorang memberikan contoh kode, contoh berikut ini akan menunjukkan kepada Anda bagaimana cara memperbaiki orientasi gambar berasal dari url (gambar jarak jauh):

Solusi 1: menggunakan javascript (disarankan)

1. karena pustaka load-image tidak mengekstraksi tag exif hanya dari gambar url (file / blob), kami akan menggunakan pustaka javascript exif-js dan load-image , jadi pertama-tama tambahkan pustaka ini ke halaman Anda sebagai berikut:

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

   Perhatikan bahwa versi 2.2 dari exif-js tampaknya memiliki masalah sehingga kami menggunakan 2.1

2. maka pada dasarnya apa yang akan kita lakukan adalah

   a - memuat gambar menggunakan window.loadImage()

   b - baca tag exif menggunakan window.EXIF.getData()

   c - ubah gambar menjadi kanvas dan perbaiki orientasi gambar menggunakan window.loadImage.scale()

   d - tempatkan kanvas ke dalam dokumen

ini dia :)

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

    });
  }
});

tentu saja Anda juga bisa mendapatkan gambar sebagai base64 dari objek kanvas dan letakkan di atribut img src, jadi dengan menggunakan jQuery Anda bisa melakukannya;)

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

di sini adalah kode lengkap di: github: https://github.com/digital-flowers/loadimage-exif-example

Solusi 2: menggunakan html (peretasan browser)

ada peretasan yang sangat cepat dan mudah, sebagian besar peramban menampilkan gambar dalam orientasi yang benar jika gambar dibuka di dalam tab baru secara langsung tanpa html (LOL saya tidak tahu mengapa), jadi pada dasarnya Anda dapat menampilkan gambar Anda menggunakan iframe dengan menempatkan atribut iframe src sebagai url gambar secara langsung:

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

Solusi 3: menggunakan css (hanya firefox & safari di ios)

ada atribut css3 untuk memperbaiki orientasi gambar tetapi masalahnya hanya bekerja pada firefox dan safari / ios masih layak disebutkan karena segera akan tersedia untuk semua browser (Info dukungan browser dari caniuse )

img {
   image-orientation: from-image;
}

Bagi mereka yang memiliki file dari kontrol input, tidak tahu apa orientasinya, agak malas dan tidak ingin memasukkan perpustakaan besar di bawah ini adalah kode yang disediakan oleh @WunderBart menyatu dengan jawaban yang ia tautkan ( https://stackoverflow.com/a/32490603 ) yang menemukan orientasi.

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

yang bisa dengan mudah disebut seperti itu

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

Jawaban WunderBart adalah yang terbaik untuk saya. Perhatikan bahwa Anda dapat mempercepatnya banyak jika gambar Anda sering berada di jalur yang benar, cukup dengan menguji orientasi terlebih dahulu dan melewati sisa kode jika tidak diperlukan rotasi.

Menyatukan semua info dari wunderbart, sesuatu seperti ini;

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

Satu liner, siapa pun?

Saya belum melihat ada yang menyebutkan browser-image-compressionperpustakaan . Ada fungsi pembantu yang sempurna untuk ini.

Pemakaian: const orientation = await imageCompression.getExifOrientation(file)

Alat yang bermanfaat dalam banyak hal juga.

Saya membuat kelas yang dibungkus dengan modul ES6 yang memecahkan persis ini.

Ini 103 baris, tidak ada dependensi, dan terstruktur dan didokumentasikan dengan cukup baik, dimaksudkan untuk mudah dimodifikasi / digunakan kembali.

Menangani semua 8 kemungkinan orientasi, dan berbasis pada Janji.

Ini dia, semoga ini masih membantu seseorang: https://gist.github.com/vdavid/3f9b66b60f52204317a4cc0e77097913

Saya menggunakan solusi campuran (php + css).

Wadah diperlukan untuk:

• div.imgCont2 wadah yang dibutuhkan untuk memutar;
• div.imgCont1wadah yang diperlukan untuk zoomout - width:150%;
• div.imgCont diperlukan wadah untuk scrollbar, ketika gambar zoomOut.

.

<?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>

Selain jawaban @fareed namrouti,

Ini harus digunakan jika gambar harus diakses dari elemen input file

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

Saya telah menulis skrip php kecil yang memutar gambar. Pastikan untuk menyimpan gambar demi hanya menghitung ulang setiap permintaan.

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

?>

Bersulang