安卓webview内嵌h5页面，img展示的图片被左旋转90°

晴愔

2177人浏览 · 2020-03-02 16:21:06

晴愔 · 2020-03-02 16:21:06 发布

问题描述和分析:
目前H5的图片展示在IOS是正常的
在Android上展示会出现旋转90度的情况
查找资料之后发现是这样的问题导致的:
在IOS那边拍照上传照片之后默认会把图片旋转了90度
IOS的浏览器内核去处理照片的时候会自动检测当前图片的Exif信息的到角度信息去自动旋转处理
Android某些的浏览器内核不会去处理图片的角度信息
所以导致了了H5上的图片在Android某些机型上出现角度旋转的问题
目前有三个解决方案:
1.服务端那边统一去处理再客户端上传照片之后将旋转了的张片还原回来（推荐，一端处理，其他端就不需要再做额外的处理无论是IOS Android 还是网页上传照片）
2.客户端处理 IOS那边去处理在他们去拍照上传的时候检测照片是否被旋转过了如果被旋转过了摆正之后再上传（暂时是发现IOS上传的图片角度会有问题）
3.h5这边处理，利用exif.js可以拿到图片信息，然后根据图片信息的Orientation变量判断做处理把图片旋转回来，这里只列举h5这边获取图片信息的具体代码如下：


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exif.js 读取图像的元数据 &raquo; 简单示例 &raquo; 在线演示 - 前端开发仓库</title>
<style>
    img{
        width:100px;height:100px;
    }
</style>
</head>
<body>
    <div class="example">
        <div id="photos" class="photos">
            <img src="authSuccess.png">
            <img src="Bush-dog.jpg">
            <img src="dsc_09827.jpg">
          </div>
        <div class="info">

            <h4>EXIF.getAllTags()</h4>
            <div id="demo-log" class="log"></div>

            <h4>EXIF.pretty()</h4>
            <textarea id="demo-val" class="input full" rows="20" readonly></textarea>
        </div>
      </div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="./js/exif.min.js"></script>
<script>
(function(){
  var photoBox = $('#photos');
  var demoLog = $('#demo-log');
  var demoVal = $('#demo-val');

  photoBox.on('click', 'img', function(){
    $(this).addClass('n').siblings().removeClass('n');

    EXIF.getData(this, function(){
      var _dataTxt = EXIF.pretty(this);
      var _dataJson = JSON.stringify(EXIF.getAllTags(this));

      demoLog.html(_dataJson);
      demoVal.val(_dataTxt);
    });
  });
})();
</script>

    </body>
</html>

Orientation信息如下：