美文网首页
苹果手机拍照上传后图片会旋转,如何获取拍照方向?

苹果手机拍照上传后图片会旋转,如何获取拍照方向?

作者: 一个做笔记的地方 | 来源:发表于2017-08-01 10:41 被阅读0次

    最近在做一个H5,需要实现的功能是,手机拍照获得一张照片,把照片通过FormData对象发送到后台,返回新的图片。在这个过程中遇到了一个坑,就是iphone苹果手机拍照之后上传,得到的照片旋转了90度。
    具体原因无需深究,通过一番google后找到解决办法!

    以下代码是获取手机拍照的方向的代码:

    // 该函数返回照片方向的代码
    function getOrientation(file, callback) {
      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);
    }
    

    用法:

    var input = document.getElementById('input');
    input.onchange = function(e) {
        getOrientation(input.files[0], function(orientation) {
            // code here!
      });
    }
    

    那么,如何通过方向代码来知道图片是怎么旋转的呢?下面这张图就是答案:

    image.png

    例如,返回的代码是3,我们得到的图片是顺时针旋转了180度之后的图片,所以我们需要对这张图片逆时针旋转180度即可得到原图。
    另外,返回-2代码代表图片不是jpg格式,返回-1代表未定义。

    参考资料:
    https://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side

    相关文章

      网友评论

          本文标题:苹果手机拍照上传后图片会旋转,如何获取拍照方向?

          本文链接:https://www.haomeiwen.com/subject/grxjlxtx.html