jQuery图片预览exif旋转问题

Question

我正在使用这个jQuery函数来显示上传前的图片。从移动设备上传的图片，存在exif方向问题。该函数只是用实际文件图像的base64代码更改预览图像的src。

在服务器端（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);
    }
}

- Alex

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 transform来旋转图像。以下是实现方式：

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

- Vadim Boltach

Answer 2

after spending lots of time on it i edit many things and got this working result. it may help you guys

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

- vivek rajput

---

欢迎来到 Stack Overflow。在 Stack Overflow 上，我们不鼓励仅包含代码的答案，因为它们无法解释如何解决问题。请编辑您的答案，解释这段代码的作用以及如何回答问题，这样对提问者和其他遇到类似问题的用户都有帮助。 - FluffyKitten

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>

- user3026707

---

欢迎编写代码并附上描述。 - αƞjiβ