为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

一只名叫tom的猫 2019-03-20 17:14:52
在网上找了很多代码,但是不知道他们都应该放在哪个文件里,还有就是,我的图片用户拍照或者从相册选择后是通过文件的方式传到后台,
查看完整描述

5 回答

?
函数式编程

TA贡献1807条经验 获得超9个赞

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


查看完整回答
反对 回复 2019-04-25
?
千巷猫影

TA贡献1829条经验 获得超7个赞

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

原文点这(第一个答案)


查看完整回答
反对 回复 2019-04-25
?
慕妹3146593

TA贡献1820条经验 获得超9个赞

查看完整回答
反对 回复 2019-04-25
?
呼如林

TA贡献1798条经验 获得超3个赞

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


查看完整回答
反对 回复 2019-04-25
  • 5 回答
  • 0 关注
  • 1357 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信