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

luhan

12112

发布于
2016-09-24

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

html

java javascript

阅读 15.5k

5 个回答

得票最新

jinghp

1252

发布于
2016-09-27

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

Coooooooool

1.1k2310

发布于
2016-09-27

更新于
2016-09-27

之前也遇到过这个问题，到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' />

原文点这(第一个答案)

清风Heart

发布于
2016-09-29

新手上路，请多包涵

图片展示元素用 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>

查看全部 5 个回答

推荐问题

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

扁平化数组转换成树形?

如何避免在Java中调用空引用对象的属性或方法时抛出NullPointerException?

省市区街道数据在哪里可以下载？

Redis Hash结构存储Long取出为Integer原因及解决方案？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？