问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

iphone上传拍照图片时图片会旋转90度，从相册选择就不会，安卓手机也不会，怎么解决？

头像
luhan
    12112

    在网上找了很多代码，但是不知道他们都应该放在哪个文件里，
    还有就是，我的图片用户拍照或者从相册选择后是通过文件的方式传到后台，

    htmljavajavascript
    阅读 15.5k
    5 个回答
    得票最新
    头像
    脉冲云_梁兴臣
      6164

      在服务器后端上传图片接口中检查图片的jpeg exif信息，然后使用图片处理库将图片旋转正再保存

      头像
      jinghp
        1252

        其实是拿手机拍照的方向问题，iphone正确的手机拍照方式是横屏的，用户往往是竖屏拍照等于照相机反转了９０度，出来的照片当然是反转９０度，当你横屏拍照上传，图片就是正确的，一张生成的图片是无法辨别选择方向的，只有在上传前反转角度才行，　因为上传到服务器以后，程序怎么可能知道这张照片要反转９０度，那张要反转１８０度，另一张要反转２７０度呢，其他的不用反转呢，正确的拍照姿势很重要呀，哈哈。。。蛋疼的问题

        头像
        Coooooooool
          1.1k2310

          之前也遇到过这个问题，到stackoverflow上搜到了这个答案(IE10+)：

          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.slice(0, 64 * 1024));
}

// usage:
var input = document.getElementById('input');
input.onchange = function(e) {
  getOrientation(input.files[0], function(orientation) {
    alert('orientation: ' + orientation);
  });
}
          <input id='input' type='file' />

          原文点这(第一个答案)

          头像
          caryhgq
            3.5k55284
            头像
            清风Heart
              1
              新手上路，请多包涵

              图片 展示元素用 img 就可以 自动修复 不要用第三方的插件

              <!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title>图片上传</title>
</head>  
<body>  
    <div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">  
            上传图片:  
            <input type="file" accept="image/*" id="input" capture="camera" onchange="selectFileImage(this);" />  
        </div>  
        <div style="margin-top: 10px;">
            <img alt="preview" width="480px" src="" id="myImage"/>  
        </div>
    <script>        
        var input = document.getElementById('input');
        var preview = document.getElementById('myImage');
        input.onchange = function(e) {
            var file = this.files[0];
            var reader = new FileReader();
            reader.onload = function(e) {
                var data = e.target.result;            
                preview.src = data;
            };
            reader.readAsDataURL(file);
        }
    </script>
</body>  
</html>
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题
              宣传栏