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

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>

jQuery图像预览exif旋转问题

3 个答案: