jQuery 圖像預覽 exif 旋轉問題

Question

我正在使用這個 jQuery 函數在上傳之前顯示圖像。 這些圖像是從移動設備上傳的，並且在 exif 方向上存在問題。 該函數只是將預覽圖像的 src 更改為實際文件圖像的 base64 代碼。

在服務器端 (php)，我正在使用一個函數來更正上傳時的 exif 旋轉。

我可以在 jQuery 中創建與我的 PHP 代碼類似的東西嗎？ 這樣我就可以在正確旋轉上傳之前顯示圖像？

Javascript

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

PHP

function image_fix_orientation($filename) {
    $exif = exif_read_data($filename);
    if (!empty($exif['Orientation'])) {
        $image = imagecreatefromjpeg($filename);
        switch ($exif['Orientation']) {
            case 3:
                $image = imagerotate($image, 180, 0);
                break;

            case 6:
                $image = imagerotate($image, -90, 0);
                break;

            case 8:
                $image = imagerotate($image, 90, 0);
                break;
        }

        imagejpeg($image, $filename, 100);
    }
}

Answer 1

是的，當然。 要預覽圖像，您正在使用 FileReader API。 但您還必須檢查 EXIF 標志並修復方向。 您可以使用https://raw.githubusercontent.com/jseidelin/exif-js/master/exif.js

並檢查這樣的標志：

function fixExifOrientation($img) {
    $img.on('load', function() {
        EXIF.getData($img[0], function() {
            console.log('Exif=', EXIF.getTag(this, "Orientation"));
            switch(parseInt(EXIF.getTag(this, "Orientation"))) {
                case 2:
                    $img.addClass('flip'); break;
                case 3:
                    $img.addClass('rotate-180'); break;
                case 4:
                    $img.addClass('flip-and-rotate-180'); break;
                case 5:
                    $img.addClass('flip-and-rotate-270'); break;
                case 6:
                    $img.addClass('rotate-90'); break;
                case 7:
                    $img.addClass('flip-and-rotate-90'); break;
                case 8:
                    $img.addClass('rotate-270'); break;
            }
        });
    });
}

我更喜歡用 CSS 變換來旋轉圖像。 這是實現：

.rotate-90 {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.rotate-180 {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rotate-270 {
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

.flip {
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}

.flip-and-rotate-90 {
  -moz-transform: rotate(90deg) scaleX(-1);
  -webkit-transform: rotate(90deg) scaleX(-1);
  -o-transform: rotate(90deg) scaleX(-1);
  transform: rotate(90deg) scaleX(-1);
}

.flip-and-rotate-180 {
  -moz-transform: rotate(180deg) scaleX(-1);
  -webkit-transform: rotate(180deg) scaleX(-1);
  -o-transform: rotate(180deg) scaleX(-1);
  transform: rotate(180deg) scaleX(-1);
}

.flip-and-rotate-270 {
  -moz-transform: rotate(270deg) scaleX(-1);
  -webkit-transform: rotate(270deg) scaleX(-1);
  -o-transform: rotate(270deg) scaleX(-1);
  transform: rotate(270deg) scaleX(-1);
}

Answer 2

在花了很多時間之后，我編輯了很多東西並得到了這個工作結果。 它可以幫助你們

 function readURLimg(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { /* Check Exif and fix orientation of image */ EXIF.getData(input.files[0], function() { //document.write('Exif=', EXIF.getTag(this, "Orientation")); // return; switch(parseInt(EXIF.getTag(this, "Orientation"))) { case 2: $("#img-file").attr('class','flip'); break; case 3: $("#img-file").attr('class','rotate-180'); break; case 4: $("#img-file").attr('class','flip-and-rotate-180'); break; case 5: $("#img-file").attr('class','rotate-90'); break; case 6: $("#img-file").attr('class','flip-rotate-90'); break; case 7: $("#img-file").attr('class','rotate-270'); break; case 8: $("#img-file").attr('class','flip-and-rotate-270'); break; } $("#m").text('Exif='+EXIF.getTag(this, "Orientation")); $('#img-file').attr('src', e.target.result).width('50%').height('auto'); }); }; reader.readAsDataURL(input.files[0]); } }

 <style> .rotate-90 { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .rotate-180 { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .rotate-270 { -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .flip { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } .flip-and-rotate-90 { -moz-transform: rotate(90deg) scaleX(-1); -webkit-transform: rotate(90deg) scaleX(-1); -o-transform: rotate(90deg) scaleX(-1); transform: rotate(90deg) scaleX(-1); } .flip-and-rotate-180 { -moz-transform: rotate(180deg) scaleX(-1); -webkit-transform: rotate(180deg) scaleX(-1); -o-transform: rotate(180deg) scaleX(-1); transform: rotate(180deg) scaleX(-1); } .flip-and-rotate-270 { -moz-transform: rotate(270deg) scaleX(-1); -webkit-transform: rotate(270deg) scaleX(-1); -o-transform: rotate(270deg) scaleX(-1); transform: rotate(270deg) scaleX(-1); } </style>

 <script src="https://cdn.jsdelivr.net/npm/exif-js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div id="m"></div> <input id="choose-img" accept="image/*" name="image" type="file" onchange="readURLimg(this);"> <img class="img-uploaded" id="img-file">

Answer 3

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="inp" type='file'>
<p id="b64"></p>
<img id="img" width="300px" height="300px">
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<script type="text/javascript">
function readFile() {
if (this.files && this.files[0])
{
  var FR= new FileReader();
  FR.onload = function(e)
  {
    document.getElementById("img").src=e.target.result;
    document.getElementById("b64").innerHTML=e.target.result;
  };
FR.readAsDataURL( this.files[0] );
}
else
{
  alert("in else");
}
}
document.getElementById("inp").addEventListener("change", readFile, false);
</script>
</html>