Jquery Image Preview Exif Rotation Issue

I am using this jQuery function do display the image before uploading. The images are uploaded from mobile devices and have problems with the exif orientation. This function just c

Solution 1:

Yes, sure. To preview image you are using FileReader API that right. But also you have to check EXIF flags and fix orientation. You can use https://raw.githubusercontent.com/jseidelin/exif-js/master/exif.js

And check flags like this:

functionfixExifOrientation($img) {
    $img.on('load', function() {
        EXIF.getData($img[0], function() {
            console.log('Exif=', EXIF.getTag(this, "Orientation"));
            switch(parseInt(EXIF.getTag(this, "Orientation"))) {
                case2:
                    $img.addClass('flip'); break;
                case3:
                    $img.addClass('rotate-180'); break;
                case4:
                    $img.addClass('flip-and-rotate-180'); break;
                case5:
                    $img.addClass('flip-and-rotate-270'); break;
                case6:
                    $img.addClass('rotate-90'); break;
                case7:
                    $img.addClass('flip-and-rotate-90'); break;
                case8:
                    $img.addClass('rotate-270'); break;
            }
        });
    });
}

I prefer to rotate images with CSS transform. Here is implementation:

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

Solution 2:

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

functionreadURLimg(input) {
      if (input.files && input.files[0]) {
          var reader = newFileReader();
          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"))) {

                  case2:
                      $("#img-file").attr('class','flip'); break;
                  case3:
                      $("#img-file").attr('class','rotate-180'); break;
                  case4:
                      $("#img-file").attr('class','flip-and-rotate-180'); break;
                  case5:
                      $("#img-file").attr('class','rotate-90'); break;
                  case6:
                      $("#img-file").attr('class','flip-rotate-90'); break;
                  case7:
                      $("#img-file").attr('class','rotate-270'); break;
                  case8:
                      $("#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>

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

Solution 3:

<!DOCTYPE html><html><head></head><body><inputid="inp"type='file'><pid="b64"></p><imgid="img"width="300px"height="300px"></body><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><scripttype="text/javascript">functionreadFile() {
if (this.files && this.files[0])
{
  varFR= newFileReader();
  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>