javascript - iphone上传拍照图片时图片会旋转90度，从相册选择就不会，安卓手机也不会，怎么解决？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

PHPz 2017-04-11 13:04:59

[JavaScript讨论组]

528

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

PHPz

学习是最好的投资！

全部回复(5)

大家讲道理2017-04-11 13:06:59 5楼

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

赞 +0

添加回复

高洛峰2017-04-11 13:06:59 4楼

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

赞 +0

添加回复

巴扎黑2017-04-11 13:06:59 3楼

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

原文点这(第一个答案)

赞 +0

添加回复

大家讲道理2017-04-11 13:06:59 2楼

利用exif.js修改exif信息，看看这个吧，亲测有用的

赞 +0

添加回复

迷茫2017-04-11 13:06:59 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>  
    <p 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);" />  
        </p>  
        <p style="margin-top: 10px;">
            <img alt="preview" width="480px" src="" id="myImage"/>  
        </p>
    <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>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>